Page 1 sur 1
[Résolu][CSS] prob avec :hover sur ie
Publié : 21 févr. 2005, 21:13
par GregK84
Salut,
bon alors en deux mot j'ai un calendrier (
exemple), quand je passe sur une date, elle change de couleur. pour réaliser ce miracle j'ai utilisé :
Code : Tout sélectionner
.calendar td:hover {
border: 1px solid #666666;
color: #6761E7;
width: 20px;
height: 20px;
font-size: 110%;
font-weight: bold;
}
je sais que ie ne gere pas correctement la propriete css :hover, mais je souhaiterais avoir quelque chose de similaire (mais sans rajouter un lien sur mes dates)
si vous avez une idée
merci
Publié : 21 févr. 2005, 21:19
par calimo
Rien de tel qu'un bon javascript avec onmouseover et onmouseout pour cette antiquité.

C'est le seul moyen.
Mais bon, un calendrier sans lien...

Publié : 21 févr. 2005, 21:36
par GregK84
calimo a écrit :Rien de tel qu'un bon javascript avec onmouseover et onmouseout pour cette antiquité.

C'est le seul moyen.
vi mais pour cela il faut que j'ajoute un lien sur chaque jour.
calimo a écrit :Mais bon, un calendrier sans lien...

ava venir par la suite ... j'ai pas encore fini le developpement ... il y aura des liens mais pas sur toutes les dates.
Publié : 21 févr. 2005, 21:38
par calimo
GregK84 a écrit :vi mais pour cela il faut que j'ajoute un lien sur chaque jour.
Tu peux automatiser ça dans le code javascript
GregK84 a écrit :calimo a écrit :Mais bon, un calendrier sans lien...

ava venir par la suite ... j'ai pas encore fini le developpement ... il y aura des liens mais pas sur toutes les dates.
Ah ben alors à ce moment là tu les aura tes liens non ? Et tu pourra faire cet effet en CSS pour IE

Publié : 21 févr. 2005, 21:47
par GregK84
calimo a écrit :GregK84 a écrit :vi mais pour cela il faut que j'ajoute un lien sur chaque jour.
Tu peux automatiser ça dans le code javascript
ca je le sais, j'ss po si bete lol
calimo a écrit :GregK84 a écrit :calimo a écrit :Mais bon, un calendrier sans lien...

ava venir par la suite ... j'ai pas encore fini le developpement ... il y aura des liens mais pas sur toutes les dates.
Ah ben alors à ce moment là tu les aura tes liens non ? Et tu pourra faire cet effet en CSS pour IE

oui effectivement, le seul petit probleme, c'est que je voudrais pouvoir donner un effet quand je survole n'importe qu'elle case de mon calendrier et en +, que sur certaine de ses cases il y aie un lien pour par exemple pointer vers la page de la derniere news
enfinn quoi qu'il en soit il n'auront k utiliser firefox lol

Publié : 21 févr. 2005, 22:16
par KissCoolMan
Je suis du même avis que Calimo, en JS, ca se fait très bien, par contre, faut répéter sur chaque td, enfin, ca dépend comment on l'fait, mais si on fait la solution simple, c'est un truc genre :
Code : Tout sélectionner
<td onmouseover="this.style='background:#FFF;color:#000;" style="background="#000; color=#FFF;">1</td>
Enfin, c'est comme ça que je ferais
Publié : 21 févr. 2005, 22:24
par calimo
C'est pour ça qu'on pourrait le faire directement dans le js, avec un document.getElementByTagName('td') par contre je crois que ça sort un tableau donc il faut faire une boucle et leur appliquer à chaque fois les propriétés CSS... ça doit se faire très facilement à mon avis, en tous cas beaucoup plus légèrement et proprement que directement dans le code HTML.
Publié : 21 févr. 2005, 23:16
par KissCoolMan
Oui oui, c'est pour ca que j'dis que c'que j'donnais, c'était la solution VRAIMENT simple, dans le sens ou le code utilisé est tout con, mais très lourd à mettre :p
Publié : 21 févr. 2005, 23:37
par martin
LA solution à mon goût :
http://www.xs4all.nl/~peterned/csshover.html
Javascript, plutôt léger, simplissime à mettre en oeuvre.
Personnellement, je crée une css minimale qui intègre ce js (enfin ce htc mais çà reviens un peu au même), et j'intègre cette css dans des commentaires conditionnels IE:
<!--[if lt IE 7]>
<link href="/hackIE.css" rel="stylesheet" type="text/css">
<![endif]-->
Publié : 21 févr. 2005, 23:38
par GregK84
KissCoolMan a écrit :Je suis du même avis que Calimo, en JS, ca se fait très bien, par contre, faut répéter sur chaque td, enfin, ca dépend comment on l'fait, mais si on fait la solution simple, c'est un truc genre :
Code : Tout sélectionner
<td onmouseover="this.style='background:#FFF;color:#000;" style="background="#000; color=#FFF;">1</td>
Enfin, c'est comme ça que je ferais
merci pour l'exemple, je me suis basé dessus.

et cela fonctionne nikel
Code : Tout sélectionner
"<td onmouseover="this.className='day_activate';" onmouseout="this.className='day_default';">".$day."</td>";
voila
Publié : 21 févr. 2005, 23:44
par GregK84
martin a écrit :LA solution à mon goût :
http://www.xs4all.nl/~peterned/csshover.html
Javascript, plutôt léger, simplissime à mettre en oeuvre.
Personnellement, je crée une css minimale qui intègre ce js (enfin ce htc mais çà reviens un peu au même), et j'intègre cette css dans des commentaires conditionnels IE:
<!--[if lt IE 7]>
<link href="/hackIE.css" rel="stylesheet" type="text/css">
<![endif]-->
j'utilise cette méthode (enfin sans le htc) pour la sélection de mes feuilles de styles globals.
faudra que je regarde ta méthode quand j'aurai un peu de temps

Publié : 22 févr. 2005, 14:44
par martin
Bon, j'ai pas assez détaillé.
Même si tu as une solution, je te détaille celle-ci.
Télécharger le fichier "csshover.htc" (3Ko) sur le lien donné.
Le mettre à la racine du site.
Créer un fichier "hackIE.css" contenant simplement cette ligne :
body { behavior:url("/csshover.htc"); }
Insérer dans la page nécessitant :hover :
<!--[if lt IE 7]>
<link href="/hackIE.css" rel="stylesheet" type="text/css">
<![endif]-->
C'est tout ! Dorénavant le selecteur :hover est utilisable conformément aux standards CSS, à tous les éléments de la page, pour IE. Tu peux utiliser directement ta feuille de style initiale.
Y'a pas plus simple

.
Publié : 22 févr. 2005, 15:29
par GregK84
effectivement !
je n'avais pas compris ca comme cela
merci pour ce super truc
