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

Mouseenter / Mouseleave在区域上

1 个答案: