Question

我有 div ，在其中我有一个 p 。段落在div上方。我的事件处理程序受到段落的影响。

这是我的事件处理程序：

$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() {
    $(this).toggleClass("active-b");
});

所以，当我在div上移动鼠标时，如果我越过段落，它将切换类。我想要的是只有在我进入/离开div时切换课程。我也试过用这个：

$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() {
    $(this).toggleClass("active-b");
});

但是现在，当我将鼠标移到段落上方时，它会翻转两次......

Answer 1

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
    if (this.id == "container-map")
    {
       $(this).toggleClass("active-b");
    }
});

那应该有用。它仅在this具有与div相同的ID时触发。

Answer 2

您必须使用mouseenter而不是mouseover

$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() {
    $(this).toggleClass("active-b");
});

Answer 3

如果你想要的是你的 active-b 课程只在离开/进入时受到影响。

您需要使用 mouseenter 而不是鼠标悬停。

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
    $(this).toggleClass("active-b");
});

div中的元素不应干扰事件处理程序

3 个答案: