檢查鼠標是否在元素 A 或元素 B 上

Question

是否可以檢查鼠標是否在兩個元素之一上？

我有這段代碼可以隱藏我的菜單：

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

我只想在鼠標不再位於 .chapterMenuContainer 上或另一個 class called.chapterMenuHeading 時執行 animation。 由於結構原因，這兩個類需要是兄弟姐妹。 是否可以檢查鼠標是否不再位於其中任何一個上方？

Answer 1

您可以將逗號分隔的選擇器列表傳遞給事件偵聽器。 然后使用this來定位鼠標“離開”的特定元素。

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

Answer 2

好吧，這可能有點傻，但我建議在兩個元素（例如 .chapterMenu）之間添加一個通用的.chapterMenu並使用事件處理 function（例如.on("mouseenter mouseleave") ，您可以在其中使用hasClass function if/else 條件執行相關代碼，對於各自的元素類。