[IE] Detection a:hover sur une image incluse dans l'ancre

Bonjour,


Je vous soumets mon problème de a:hover sur internet explorer en espérant que la réponse ne soit pas évidente (je n'ai pas trouvé d'infos à ce sujet).

Je veux faire un menu vertical en utilisant le flottement des éléments " li ". La petite difficulté est d'afficher une image en dessous des boutons du menu lorsque la souris survole le dit bouton ET aussi lorsque la souris survole la zone virtuelle de l'image (image par défaut en visibility:hidden).

J'ai écrit un peu de code pour illustrer mon problème : http://msfs.test.free.fr/default.html
(c'est pas joli mais ce n'est pas le but)

Explications de l'exemple.
Il y a deux tests différents (donc deux menus). Commencons par ce qui est commun aux deux test. Chaque élément " li " du menu contient une ancre qui elle-même contient du texte et une image. Les " li " sont bordés de rouge et les " a " de vert, pour plus lisibilité. Après le menu, il se trouve un " div " (background en gris) dans lequel se trouve un paragraphe (blabla) et une image (en bleu gris). Ces derniers éléments sont importants pour comprendre mon problème.

Test1.
L'image est incluse dans un " span " (lui même inclus dans l'ancre). Le span est en position absolue, pour que les éléments d'après le menu se positionnent à la suite. Le a:hover est réglé pour afficher l'image (visibility: visible). Tout marche bien sur firefox (au survol au dessus du texte ET de l'image). Sur IE (6 et 7), le survol de l'image ne marche que sur une zone où il n'y a aucun élément (zone du background en gris). Mais si vous passez le curseur par l'image en bleu gris ou par le paragraphe, rien ne se passe. De plus, quand l'image apparait, elle n'est pas cliquable comme un lien.

Test2.
Ce test a été fait en me disant qu'il fallait peut-etre que l'image reste dans l'ancre (ie. pas séparée graphiquement par une position absolue). C'est donc l'ancre qui est en positoin absolue, par rapport à un "div" en position relative. On voit bien la différence avec la bordure en vert. Ceci dit, il se passe le même problème avec internet explorer que pour le test1. L'image du lien3 apparaitra par exemple. La petite différence est que si on passe doucement sur la bordure de l'ancre ca marche, mais pas plus.

Z-index.
J'ai essayé d'utiliser la propriété z-index mais rien n'y fait, ce qui ne parait pas illogique car je ne pense pas que ce soit un pb de profondeur.

Bref, je ne sais pas si il y a une solution, mais je souhaite surtout comprendre la différence de traitement d'internet explorer selon qu'il y ait un élément ou pas en dessous du curseur.
En vous remerciant d'avance.
Gilles

bonsoir,

Ce n'est pas illogique , mais different.

2 elements dans le flux et se superposant en occupant en tout ou partie une même zone de l'écran.

1) Firefox , le premier element du flux reste au dessus du second element et ainsi de suite.

2) IE et Opera, le dernier element recouvre le(s) premiers.

Un z-index devrait en effet mettre tout le monde d'accord .

Pour rendre un z-index actif il faut l'associer a un position:relative; ou position:absolute.
Cela permet de differencier les zones ainsi definies les unes des autres .
Les elements enfants de ces differentes zones , prennent comme 'z-index de reference' celui de leur parent .
2 block : A et B
A en z-index:1 et B en z-index:2
Aucun des enfants de A ne pourront s'afficher au dessus de B , même avec des z-index superieur a 2 .

GC
Modifié par gcyrillus (03 Apr 2008 - 23:20)

Salut gcyrillus,


Merci beaucoup d'avoir pris du temps pour me répondre et désolé de ne réagir que maintenant (mon ordi m'a fait des caprices).

Tu m'as déjà pas mal éclairé sur la différence firefox / IE-opera pour l'ordre d'empilement par défaut mais pour être sûr de bien comprendre: quand tu parles du flux ici c'est l'ordre des éléments dans le code html ? (je me pose la question puisqu'on a tendance à dire qu'un élément en positoin absolue (par exemple) sort du flux normal)

En tout cas à la suite de ta réponse, j'ai essayé d'arranger tout ca avec des z-index et je dois dire que c'est pas encore ca. Il y a encore des subtilités qui m'échappent car pour que ca fonctionne sous IE je n'ai réussi qu'avec un z-index négatif (mais qui fait disparaitre les éléments sous firefox). Avec des z-index positifs, ca ne marche pas comme je voudrais.
Pour l'exemple, toujours l'adresse : http://msfs.test.free.fr/default.html . Les images qui doivent être au premier plan sont toujours en jaune et ne sont plus cachées puisqu'ici je m'interesse seulement à l'ordre d'empilement. Et de plus, seul le premier menu (partie la plus haute) est à prendre en considération.

Voilà un petit schéma de cet exemple pour que ce soit plus clair :
- menu où le span positionné an absolu doit être au premier plan :
div("menu")> ul > li(float:left) > a(position:relative) > span(position:absolute et z-index:100) >img(jaune)
- partie (suite dans le code html) qui doit être sous le span précédent :
div ("corps")> p (position:relative et z-index:10)
div ("corps")> img (bleu-gris)(position:relative et z-index:10)

Le résultat attendu est bon avec firefox mais IE6 met toujours le paragraphe et l'image bleu-gris (du div "corps") au dessus de l'image jaune (du div "menu").

Et dernier petit problème: sous IE dans les zones où l'image jaune est visible (càd quand il n'y a aucun élément au même endroit), le curseur ne se modifie pas comme un lien cliquable alors que firefox le fait puisque le span de l'image est le fils d'une ancre.

Voili voilou, encore merci !
Gilles

Me revoilà,

En fait, je viens de comprendre deux choses:

- pour l'ordre d'empilement il faut remonter aux blocs conteneurs frères, donc ici le div du menu et le div du corps. Avec le "code" suivant ca marche donc:
div ("menu", position:relative, z-index:2) > ul > li (float:left) > a (position:relative) > span (position:absolute) >img ("jaune")
div ("corps", position:relative, z-index:1) > p + img ("bleu-gris")
Ca marche sauf que sous IE (encore et encore...) mettre le div du menu en position relative déplace les ancres sans que je comprenne encore pourquoi. Le changement est visible toujours à http://msfs.test.free.fr/default.html

- concernant l'histoire du curseur qui ne se modifie pas en passant au dessus de l'image (dans un span lui même dans une ancre), cela posera problème si on veut une interaction a:hover pour afficher l'image (normalement cachée). C'est comme si IE ne reconnaissait pas l'ancre puisque le span est sorti graphiquement de l'ancre. Du coup l'effet voulu sous IE ne marchera pas, à moins de mettre carrément l'ancre en position absolue...

Ca avance, ca avance... mais tout commentaire/aide est le bienvenu.
Gilles
Modifié par GillesG (08 Apr 2008 - 18:15)