选择父母＆amp;使用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 *")，但这两个问题都有类似的问题。

有什么想法吗？

Answer 1

请尝试使用mouseenter和mouseleave。

以下是有关mouseenter vs mouseover的相关文档：

  

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

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