[Résolu][CSS] prob avec :hover sur ie

[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

[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...

[GregK84]

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.

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.

[calimo]

vi mais pour cela il faut que j'ajoute un lien sur chaque jour.

Tu peux automatiser ça dans le code javascript

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

[GregK84]

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

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

[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

[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.

[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

[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]-->

[GregK84]

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

[GregK84]

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

[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 .

[GregK84]

effectivement !
je n'avais pas compris ca comme cela

merci pour ce super truc