Выберите родительские и все дочерние элементы при использовании наведения мыши, jQuery

Question

У меня есть div с элементами (h3, img, p) внутри. Я хочу использовать jQuery для определения, когда пользователь наводит курсор на этот div, а затем переключать класс элемента в этом div.

Я использую код ниже:

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

Работает, как и ожидалось, при наведении курсора на div. Если вы наведите курсор на элемент внутри div (например, .entry h2), он отключит класс, как если бы он оставил родительский div (.entry), но на самом деле он внутри него. Элементы не плавают внутри div.entry, который, как я думал, может скинуть. Я пробовал $(".entry *") и $(".entry, .entry *"), но у них обоих есть похожие проблемы.

Есть мысли?

Answer 1

Попробуйте использовать mouseenter и mouseleave вместо.

Вот соответствующий документ о mouseenter против mouseover:

Событие mouseenter отличается от mouseover тем, как оно обрабатывает барботирование событий. Если при наведении мыши в этом примере использовались указатель мыши перемещается над внутренним элементом срабатывает. Это обычно нежелательное поведение. Мышиный центр, с другой стороны, только запускает свой обработчик, когда мышь входит в элемент, с которым он связан, а не потомок.

Вот пример , который может помочь; обратите внимание, какие события запускаются, когда вы перемещаете указатель в элементы и из них.