Sélectionnez le parent et tous les éléments enfants en utilisant mouseover, jQuery - jquery, hover, toggle, selector, bind

J'ai un div avec des éléments (h3, img, p) à l'intérieur. Je veux utiliser jQuery pour détecter quand un utilisateur survole cette div pour ensuite basculer vers la classe d'un élément de cette div.

J'utilise le code ci-dessous:

$(".entry").bind({
mouseover: function() {
$(".readMore").toggleClass("inverted");
},
mouseleave: function() {
$(".readMore").toggleClass("inverted");
}
});

Cela fonctionne comme prévu lorsque vous survolez la div. Si vous survolez un élément de la div (par exemple, .entry h2) il bascule la classe comme si elle avait quitté le parent div (.entry) mais c’est réellement dedans. Les éléments ne flottent pas dedans div.entry que j'avais pensé pourrait le jeter. j'ai essayé $(".entry *") et $(".entry, .entry *") mais les deux ont des problèmes similaires.

Des pensées?

Réponses:

Essayez d'utiliser mouseenter et mouseleave au lieu.

Voici la documentation pertinente sur mouseenter contre mouseover:

L'événement mouseenter diffère de mouseover enla façon dont il gère événement bouillonnant. Si mouseover a été utilisé dans cet exemple, alors quand le pointeur de la souris déplacé sur l'élément Inner, le gestionnaire serait déclenché. C'est généralement un comportement indésirable. L'événement mouseenter, d’autre part, ne déclenche son gestionnaire que lorsque la souris entre dans le élément auquel il est lié, pas un descendant.

Voici un exemple cela pourrait aider; notez quels événements sont déclenchés lorsque vous déplacez votre pointeur dans et hors des éléments.