28173 sujets

CSS et mise en forme, CSS3

Changer dynamiquement z-index -- sans javascript?

Bonjour à tous,

Je souhaite changer la valeur z-index d'un div lorsqu'on passe la souris dessus.

En effet, j'ai trois div côte à côte, chacun en z-index =1.

Je voudrais que lorsqu'on passe sur un des div, celui-ci prenne la propriété z-index = 2 et s'affiche donc par dessus les autres.

En cherchant sur internet, j'ai trouvé que c'était possible de le faire en JS, seulement je maîtrise pas du tout...

Je me demandais s'il y avait un moyen de le faire directement en CSS?

j'ai essayé :
- de définir un z-index dans le div et un autre en balise+hover, ça ne marche pas, pour une raison inconnue le div prend le dernier z-index mais repousse les autres éléments de l'image, pas moyen de les faire rester en place quel que soit l'attribut qu'on leur donne (absolute etc)...
- de définir un z-index en balise et un autre différent en balise+hover, mais le second ne fait pas effet...



<html>
<head>
<style type="text/css">
a.gros{
text-decoration:none;
width:22%;
}
a.gros:hover{
width:44%;
text-decoration:none;
z-index:2}
</style>
</head>

<body style="background-color:black;padding-left:5%;padding-right:5%">
<div style="top:10%;width:100%;height:70%">
<a class="gros" href=""><div style="position:absolute;z-index:1"><img width="100%" src="../pagesimages/tiroir1801.jpg"></div></a>
<a class="gros" href=""><div style="position:absolute;left:25%;z-index:1"><img style="width:100%" src="../pagesimages/tiroir1802.jpg"></div></a>
</div>

</body>
</html>


En gros la question c'est : est-il possible de faire varier le z-index en css, selon qu'on est en balise ou en balise : hover?
Smiley biggol

Merci à tous Smiley smile
Bonjour,

Avant de répondre à ta question, je tiens à te signaler que ton code comporte au moins 2 erreurs importantes:
• absence de doctype (peut-être omis pour l'exemple, dans ce cas rassure-moi Smiley cligne )
• éléments de block insérés dans des balises en ligne

Je te conseille vivement d'effectuer ces corrections au plus vite et de tester régulièrement la validité de ta page.

Pour ton problème de changement de profondeur, c'est tout à fait faisable. Voici une piste:


[#black][b]HTML[/b][/#]


<div id="conteneur">
	
<p id="p1">Survolez-moi pour faire apparaître la phrase cachée</p>
<p id="p2">Vive les kiwiz!</p>

</div>



[#black][b]CSS[/b][/#]


#conteneur {position:relative; width:200px; height:5em;}
		
#p1,#p2 {position:absolute; top:0; left:0; width:100%; height:100%;}
		
#p1 {background:lime; z-index:1;}
#p2 {background:fuchsia;}
		
#conteneur:hover #p1 {z-index:0;}
heu merci pour ta réponse Smiley smile

En fait le site est encore loin d'être en ligne (environ 100 pages en cours de construction, donc je corrige petit à petit mm si je suis loin d'être pro...)

Par contre j'ai essayé ton code et ça ne m'affiche rien du tout, juste le premier texte (j'ai testé avec IE). C'est moi qui suis bête ou IE qui marche pas?

Merci Smiley smile
Internet Explorer 6 n'accepte pas l'application d'hover sur d'autres éléments que a. Les autres navigateurs (dont Internet Explorer 7) implémentent sans difficulté cette fonctionnalité.
Si le support des versions d'Internet Explorer antérieures à 7 est recherché, il te faudra recourir à JavaScript.
Modifié par Benjamin D.C. (29 Dec 2007 - 19:44)
oui, la balise ne me pose pas de problème, parce que cet élément ouvre sur un autre.

Ben je vais essayer de le faire marcher chez moi, je reviens si d'autres soucis Smiley smile

Merci beaucoup!
Sujet clos
Aller à