problème avec z-index

**filtep** · 09/07/2012, 19h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**filtep** · 09/07/2012, 20h26

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

Bonne soirée à tous

**polymorphisme** · 09/07/2012, 21h09

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.

**miss_socrates** · 10/07/2012, 19h05

Je pense que ça doit être possible avec la fonction onMouseover.

**filtep** · 11/07/2012, 00h24

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

problème avec z-index

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager