使用鼠标悬停时选择父元素和所有子元素，jQuery答案

【问题标题】：Select parent & all children elements while using mouseover, jQuery使用鼠标悬停时选择父元素和所有子元素，jQuery
【发布时间】：2011-11-08 00:38:41
【问题描述】：

我有一个 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 *")，但这两个都有类似的问题。

有什么想法吗？

【问题讨论】：

标签： jquery hover toggle selector bind

【解决方案1】：

尝试改用mouseenter 和mouseleave。

这是有关 mouseenter 与 mouseover 的相关文档：

mouseenter 事件在处理方式上与 mouseover 不同事件冒泡。如果在这个例子中使用了 mouseover，那么当鼠标指针移到内部元素上，处理程序将是触发。这通常是不受欢迎的行为。 mouseenter 事件，另一方面，只有当鼠标进入它绑定到的元素，而不是后代。

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

【讨论】：