0
Après Dom ready, je détecte si la souris se déplace et attache une classe "has-hover" à une div parente.CSS: le survol ne fonctionne pas sur l'élément avec la classe ajoutée dynamiquement
A l'intérieur se trouvent deux étiquettes. Le premier a son état hover attaché à la classe "has-hover" de son div parent, qui est la fonctionnalité que je veux atteindre.
La deuxième étiquette a son état stationnaire directement attaché à elle.
Pourquoi l'état hover fonctionne-t-il sur la deuxième étiquette mais pas sur la première?
Merci!
function watchForHover() {
\t var div = $(".div");
var hasHoverClass = false;
\t function enableHover() {
\t if (hasHoverClass) return;
\t \t div.addClass("has-hover");
\t \t hasHoverClass = true;
\t };
\t document.addEventListener("mousemove", enableHover, true);
};
watchForHover();label {
width: 70px;
height: 70px;
margin: 5px;
color: white;
background-color: red;
transition: all 0.3s;
display: block;
}
.has-hover {
label:first-child:hover {
opacity: 0.5;
}
}
label:nth-child(2):hover {
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>label 1</label>
<label>label 2</label>
</div>
À moins que je ne me trompe pas, il semble que vous pouvez simplifier vos sélecteurs à ce qui suit: 'étiquette .a-vol stationnaire: hover' et vos règles de style appliquerez lors du survol de' label' tant que le parent '.div' a la classe' .has-hover' – UncaughtTypeError
Merci @UncaughtTypeError. J'ai utilisé des pseudo-sélecteurs d'enfants juste pour l'exemple. Si je les enlève et laisse juste là le sélecteur de .has-hover cela ne fonctionnera pas non plus ... est là une explication pour cela? – metaskopia
Je viens d'essayer '.has-hover label: hover { opacité: .5; } 'dans l'EDI du navigateur en utilisant votre exemple de fragment de code et cela a fonctionné comme prévu. Ou essayez-vous d'accomplir autre chose? – UncaughtTypeError