鼠标进入/鼠标离开区域

Question

嘿，我有一个小问题。我正在一个区域上执行 mouseenter 和 mouseleave：

50% 已经解决：

$("area.anyClass").on('mouseenter',function(){
    $(this).addClass('hovered'); // works!
});

$("area.hovered").on('mouseleave',function(){
    $(this).removeClass('hovered'); // does not work!
});

所以第一部分完美运行，当我将鼠标悬停在带有class="anyClass" 的区域时，该区域将获得一个新的class="anyClass hovered"。

当我用鼠标离开这个区域时，两个类都停留，为什么？

您好！

Answer 1

这是因为您附加了一次事件侦听器 - 当代码运行时（假设这是在 $(document).ready( 等中）。没有任何元素与选择器area.hovered 匹配，因此没有事件监听器。相反，使用事件委托：

$("area").on('mouseleave', '.hovered', function(){
    $(this).removeClass('hovered');
});

将第二个参数设置为选择器意味着它将侦听器添加到匹配area 的所有元素，然后在mouseleave 事件上检查它们是否也匹配.hovered，如果匹配则调用该函数。

jQuery docs on .on