Question

是否可以检查鼠标是否位于两个元素之一上？

我有这个代码可以隐藏我的菜单：

$(document).on("mouseleave", ".chapterMenuContainer", function() {
            //mouse leave
            $('.chapterMenuContainer').stop().animate({
                maxHeight: '0'
            }, 100);
        });

仅当鼠标不再位于 .chapterMenuContainer 或另一个名为 .chapterMenuHeading 的类上时，我才会执行动画。出于结构原因，这两个类需要是兄弟姐妹。是否可以检查鼠标是否不再位于其中任何一个上方？

Answer 1

您可以将逗号分隔的选择器列表传递给事件侦听器。然后使用 this 定位鼠标“离开”的特定元素。

$(document).on("mouseleave", ".chapterMenuContainer, .chapterMenuHeading", function() {
  //mouse leave
  $(this).stop().animate({
    maxHeight: '0'
  }, 100);
});

Answer 2

嗯，这可能有点傻，但我建议在两个元素之间添加一个公共类，例如 .chapterMenu 并使用事件处理函数，例如 .on("mouseenter mouseleave") 并且在其中您可以使用 { {1}} 函数在 if/else 条件中为相应的元素类执行相关代码。

检查鼠标是否在元素 A 或元素 B 上

2 个答案: