CODEWITHSUNDEEP
javascriptjquery
user44109
user44109

Reputation: 119

Check if mouse is over element A OR element B

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?

Upvotes: 0

Views: 139

Answers (2)

imvain2
imvain2

Reputation: 15857

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);
});

Upvotes: 1

Jonathan Kumar
Jonathan Kumar

Reputation: 563

Well this might be a bit silly, but i would suggest adding a common class between both elements such as .chapterMenu and using a event handling function such as .on("mouseenter mouseleave") and within that you can use the hasClass function within an if/else condition to execute the relevant code, for the respective element classes.

Upvotes: 0

Related Questions