Hover pour un élément situé à un z-index inférieur

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.

Pièce jointe 592703

Existe-t-il une solution ?

Merci pour votre aide.

Salut,

As-tu vraiment besoin de z-index?

Code:

---

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:

---

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>

---

Bonjour,
le point important :

Citation:

---

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:

---

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; }

---

Code:

---

pointer-events: none;

---

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

À plus.