使用mouseover,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不是.

这是关于mouseentervs 的相关文档mouseover:

mouseenter事件与处理事件冒泡的方式不同于mouseover.如果在此示例中使用鼠标悬停,则当鼠标指针移过Inner元素时,将触发处理程序.这通常是不受欢迎的行为.另一方面,mouseenter事件仅在鼠标进入绑定的元素而不是后代时触发其处理程序.

这是一个可能有帮助的例子 ; 请注意当您将指针移入和移出元素时会触发哪些事件.