javascript - Mouseenter/Mouseleave在区域上

嘿，我有一个小问题。我正在对某个区域进行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"。

当我用鼠标离开该区域时，两个班级都留下来，为什么？

问候！

最佳答案

这是因为您仅在运行代码时附加一次事件侦听器（假设它在$(document).ready(中）。没有与选择器area.hovered匹配的元素，因此没有事件侦听器。而是使用事件委托：

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

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

jQuery docs on .on