J'ai créer un effet hover sur un élément parent pour faire apparaitre l'élément enfant, cependant je ne veux pas que cet effet hover s'applique à l'enfant au survol.
Existe-t-il un code pour annuler l'effet du parent au survol de l'enfant?
Code : j'ai voulu qu'en survolant un li de la liste, une sous-liste en opacité 0 apparaisse mais lorsque je survol la sous-liste invisible elle apparait aussi, hors je veux qu'elle apparaisse uniquement au survol de son parent.
html :
<div class="case_general">
<ul id="toplist">
<li class="noms">Paul-Emile Mottard
<small>président</small>
<div class="intitule">
<ul>
<li>blablablabla</li>
<li>blablablabla</li>
<li>blablablabla</li>
</ul>
</div>
</li>
<li class="noms">christian petry
<small>direction générale</small>
</li>
<li class="noms">jérôme aussems
<small>direction</small>
</li>
</ul>
</div>
css:
.case_general {
background-color: white;
padding: 15px;
position: absolute;
}
.noms:hover {
cursor: pointer;
}
.noms:hover .intitule {opacity: 1;
transition: all .4s;}
ul li {
list-style: none;
position: relative;
}
.intitule {
position: absolute;
right: -150px;
top: 0;
opacity: 0;
border: 3px solid #840c41;
background-color: white;
}
D'avance merci.
EDIT
J'ai trouvé une solution pour mon cas précis, en hover sur l'enfant le mettre en display none
.intitule:hover {display:none;} et iln'apparait plus au hover sur lui.
Mais dans d'autres cas que le miens y a-t-il un code pour annuler un effet hover?
