Discussion :

[jd_83]

Bonsoir à tous,

La question est assez difficile à formuler :
J'ai 3 éléments : l'élément A, qui reste au fond, le B, partiellement transparent, qui contient du texte et qui s'affiche lors du :hover du A, et l'élément C, dont j'aimerais qu'il ait les propriétés suivantes :
- rester derrière le B (lorsque celui-ci est affiché), pour ne pas qu'une partie du texte soit cachée. Pour ça, j'ai mis le z-index du B à 10, et celui du C à 5
- mais redevenir entièrement visible et surtout cliquable lorsque le pointeur le survole.

C'est cette propriété que je ne parviens pas à obtenir : je passe le z-index du C à 15 dans le C:hover, mais c'est peine perdue car le C:hover ne s'active pas, tant que le B est devant, ce qui est logique.



Existe-t-il une solution ?

Merci pour votre aide.

[javatwister]

Salut,

As-tu vraiment besoin de z-index?

Code css :

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

1
2
3
4
5
6
7
#un{background:red;width:200px;height:150px;}
#deux{background:lime;}
#trois{background:yellow;}
#un, #deux{display:flex;flex-direction:row-reverse;align-items:center;}
#deux, #trois{visibility:hidden}
#un:hover #deux{visibility:visible}
#deux:hover #trois{visibility:visible}

Code html :

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

1
2
3
4
5
6
<div id="un">A voici du texte
	<div id="deux">B voici du texte
		<div id="trois">C voici du texte
		</div>
	</div>
</div>

[NoSmoking]

Bonjour,
le point important :

mais redevenir entièrement visible et surtout cliquable lorsque le pointeur le survole.

en fait il ne faut pas que l'élément B puisse recevoir les événements et pour cela il existe pointers-event qu'il suffit de mettre à none sur l'élément B.

Quelque chose comme :

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
#B {
  display: none;
  z-index: 10;
  position: absolute;
  pointer-events: none;
}
#C {
  display: none;
  z-index: 5;
  position: absolute;
}
#A:hover #B,
#A:hover #C {
  display: block;
}
#C:hover {
  z-index: 15;
}

[jd_83]

Code :

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

pointer-events: none;

est impeccable : B disparaît au profit de C, qui devient cliquable.
Le résultat est nickel.

À plus.