javascript - Check if mouse is over element A OR element B

Question

Is it possible to check if the mouse is over one of two elements?

I have this code which will hide my menu:

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

I would like to execute the animation only if the mouse is no longer over .chapterMenuContainer OR another class called .chapterMenuHeading. These two classes need to be siblings for structural reasons. Is it possible to check if the mouse is no longer over either one of them?

Answer 1

You can pass a comma separated list of selectors to the the event listener. Then use this to target the specific element that the mouse "left".

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