Exclure une img de la fonction z-indexFermé

Question

Bonjour,
Sur une page comportant plusieurs photos empilées (liste non ordonnée, position absolute) les images (qui sont des liens vers d'autres pages) s'activent lorsque le visiteur les survole avec la souris grâce à
a:hover img {
border: 3px solid #fff;
z-index : 10; }

Tout fonctionne parfaitement. Un seul problème : l'image bannière de ma page qui sert , comme souvent, de lien retour vers la page d'accueil se retrouve aussi au survol de la souris avec une bordure et un léger mouvement en avant.

Comment exclure cette img des fonctions z-index et border sachant que cette bannière est seule dans un
<p id="banneriere"><a href="../index.html"><img src="" /></a></p>

j'ai essayé plusieurs solutions sans succès jusqu'ici.Merci d'avance de vos suggestions

j'ai essayé plusieurs solutions sans succès jusqu'ici.Merci d'avance de vos suggestions

le hollandais volant · Answer

Salut !
il te suffit de rajouter :
#banneriere a:hover img {
border: 0;
}
Sinon, tu peux aussi appliquer ton css là, aux seuls images qui sont dans le liste non ordonnée (<ol>) : 
ol li a:hover img {
border: 3px solid #fff;
z-index : 10; }

hulotte · Answer

Bonjour,
Là première solution, je l'avais testée mais elle désactive la fonction z-index sur toutes les balises img.
J'avais bon espoir en appliquant donc le style uniquement aux img de ma liste comme tu le suggère mais pour une mystérieuse raison l'effet est le même. Dans ce cas aussi le z-index ne s'applique plus, à aucun des éléments de la page, bannière et img de la liste
 Merci cependant de t'être penché ce ce problème.

le hollandais volant · Answer

Ah…

Oui : le z-index ne s'applique qu'à des éléments qui ont un positionnement particulier.

position: relative ou position: absolute ou position:fixed

hulotte · Answer

Oui, justement z-index s'applique à ma liste en positionnement absolute mais ne devrait pas s'appliquer à l'image de la bannière qui n'a pas de positionnement spécifié étant la première dans le flux.

Finalement, j'ai contourné le problème en n'utilisant pas pour mon lien la fonction a:hover mais en transformant mon image de bannière en image réactive et utilisant la fonction  
onmouseover="MM_goToURL  ...
Si cela peut servir à quelqu'un cela fonctionne parfaitement, sans interférence avec le z-index des autres images.

En tous cas, Merci.

Exclure une img de la fonction z-index

4 réponses

Discussions similaires

Newsletters