[résolu] Problème de survol sous IE

Hello,

Inhabituel de poster un pb résolu, non? En fait j'ai trouvé la solution en préparant mon post et comme cette solution n'est pas évidente, j'ai jugé utile de la partager avec ce forum.

Point de départ: une liste <ul> avec des liens images (<img> dans un <a>. L'effet recherché est de faire apparaître une bordure en survol du lien.

Le code HTML :

<div id="link">
<ul>
<li><a href="#"><img src="img1.jpg" /></a></li>
<li><a href="#"><img src="img2.jpg" /></a></li>
<li><a href="#"><img src="img1.jpg" /></a></li>
</ul>
</div>

Le code CSS :

/* fff est la couleur du fond */
/* donc l'image apparaît sans cadre */
/* sauf en survol */

div#link a:link 	img {border: 5px solid #fff; }
div#link a:visited 	img {border: 5px solid #fff; }
div#link a:focus 	img {border: 5px solid #f00; }
div#link a:hover 	img {border: 5px solid #f00; }
div#link a:active 	img {border: 5px solid #fff; }

A propos de ce CSS, on remarque que l'ordre LVFHA a bien été respecté comme expliqué ici : http://meyerweb.com/eric/css/link-specificity.html .

Hé bien, ça ne marche pas sous IE 6. Le cadre rouge n'apparaît pas au survol, mais bizarrement on le voit, quelques fois, en cliquant.

J'ai mis la page en ligne, ici http://turbinus.free.fr/css-lab/pb-hover.html#

J'ai trouvé la solution ici (1) et ici (2).

(1) http://www.quirksmode.org/css/ie6_purecsspopups.html
(2) http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

Pour que le survol soit pris en compte, il faut décrire une régle CSS supplémentaire, modifiant un élément CSS, qui n'a pas été affecté dans les règles link, visited, ... hover.

Le CSS suivant a marché dans mon cas (mais pas tout à fait, voir plus loin).

CSS pour correction sous IE :

div#link a:hover 	{visibility: inherit;  } 

La correction n'est pas complète car, le survol ne marche que sur les liens non actifs. Le cadre rouge n'apparaît pas sur le lien actif.

En regardant les règles CSS, on peut comprendre pourquoi, :active est défini après :hover et a donc, logiquement précédance sur lui.

La correction définitive consiste donc à placer la règle :hover en dernier.

CSS final :

div#link a:hover 	{visibility: inherit;  } 

div#link a:link 	img {border: 5px solid #fff; }
div#link a:visited 	img {border: 5px solid #fff; }
div#link a:focus 	img {border: 5px solid #f00; }
div#link a:active 	img {border: 5px solid #fff; }
div#link a:hover 	img {border: 5px solid #f00; }

Voilà, tout marche bien sous IE6. J'ai mis la page en ligne ici.

http://turbinus.free.fr/css-lab/fix-hover.html#

Une question me titille. Erik Meyer n'étant pas un débutant, violer sa règle sur l'ordre des liens me chagrine un peu.

Tout commentaire sera apprécié.
Modifié par pat665 (05 Nov 2005 - 10:57)

pat665 a écrit :
En fait j'ai trouvé la solution en préparant mon post et comme cette solution n'est pas évidente, j'ai jugé utile de la partager avec ce forum.

Très bonne idée et merci à toi au nom des autres membres intéressés.

En fait, c'est un bug assez classique sous IE, que l'on a évoqué dans un précédent concours sur ce forum (cf question 3)

La réponse à cette question explique que :

a écrit :
IE ne reconnaissant que l'état de survol pour un élément <a>, le "a:hover span" ne peut pas fonctionner si, préalablement n'est pas fait explicitement mention de la déclaration de l'état de survol "a:hover".

Le problème se résoud par exemple avec :
a:hover{display: inline;} ou a:hover{background: none;}

Tu pourras voir que ce "truc" apparaît dans tous les tutoriels Alsa qui décrivent un comportement au survol.

Par contre, si je peux me permettre, je trouve que tu as très très bien détaillé la réponse à la question, mais la question elle-même est assez évasive.
Je ne suis même pas sûr de l'énoncé de départ. Est-ce que tu voulais simplement créer une bordure au survol d'une image ?

Salut Raphael,

Message bien reçu, je tâcherais de faire plus d'effort sur la question. D'ailleurs, en général, je n'ai que la question.

J'ai fait l'erreur de limiter ma recherche dans le forum sur les 30 derniers jours. Sans doute aurais-je trouvé en prenant tout.