problème avec z-index

Version imprimable

Bonsoir,
je désire faire passer un bloc au dessus d'un autre au passage de la souris,
je pensais pouvoir faire ça simplement avec un :hover mais que neni !!!
Voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <html> <head> <style type="text/css"> .bloc_bleu{ width: 200px; height: 100px; border:solid 1px blue; background:blue; z-index:0; } .bloc_rouge{ position:absolute; margin-left:100px; margin-top:50px; width: 200px; height: 100px; border:solid 1px red; background:red; z-index:1; } .bloc_bleu:hover{ z-index:2; } </style> </head> <body> <div class="bloc_bleu"><div> <div class="bloc_rouge"><div> </body> </html>
Quelqu'un aurait-il une idée de là où ça cloche ??

Merci d'avance.

Philippe

09/07/2012, 20h26
filtep

Désolé d'encombrer le forum, je n'avais pas fermé mes balises <Div> :oops:

Bonne soirée à tous
09/07/2012, 21h09
polymorphisme

Bonjour,

de mémoire, il me semble que la technique du roll-over utilise la propriété visibility (ou quelque chose de proche), tandis que toi utilise z-index !
Bon de toute façon, il principe est le même. Tu peux utiliser une fonction javascript qui te modifie la valeur z-index de la partie survolée par le curseur de la souris.
10/07/2012, 19h05
miss_socrates

z-index

Je pense que ça doit être possible avec la fonction onMouseover.
11/07/2012, 00h24
filtep

Bah en fait, une fois les balises <div> fermées, ça fonctionne très bien avec le z-index. Avec visibility ça va faire apparaitre ou disparaitre un bloc mais pas en faire passer un au dessus de l'autre en cas de chevauchement partiel (ce que je fais ici)

Merci pour vos avis

Philippe