使用mouseover时选择父元素和所有子元素，jQuery

Question

我有一个包含(h3, img, p)元素的div。 我想使用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 *")，但这两者都存在类似的问题。

有什么想法吗？

- mrhigham

Answer 1

尝试使用mouseenter和mouseleave代替。

这是关于mouseenter和mouseover的相关文档：

mouseenter事件与mouseover在处理事件冒泡方面不同。例如，如果在此示例中使用mouseover，则当鼠标指针移动到Inner元素上时，处理程序将被触发。这通常是不希望的行为。另一方面，mouseenter事件仅在鼠标进入绑定其到的元素时触发其处理程序，而不是其后代元素。

这里有一个示例，可能会有所帮助；请注意在您将指针移入和移出元素时触发了哪些事件。

- Andrew Whitaker