jquery - 使用鼠标悬停、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)，但实际上它是在里面。这些元素没有 float 在 div.entry 内部，我原以为这可能会导致它失效。我尝试了 $(".entry *") 和 $(".entry, .entry *") 但这两个都有类似的问题。

有什么想法吗？

Answer 1

尝试使用mouseenter和 mouseleave相反。

以下是有关 mouseenter 与 mouseover 的相关文档:

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant.

Here's an example这可能有帮助；请注意当您将指针移入和移出元素时会触发哪些事件。