CODEWITHSUNDEEP
javascriptjqueryhovermouseover
Alex
Alex

Reputation: 68482

Detect if mouse is outside of multiple elements

I made a fiddle here:

http://jsfiddle.net/RrxpT/

So the red box needs to be placed over the blue boxes when mouse is on top of them. As you can see it works, but I also want the red box to be hidden if it's not on top on any of the blue boxes.

I changed the code to:

if(box.is(':hover')){
  // put red box on top
}else{
  // hide red box
}

http://jsfiddle.net/RrxpT/1/

But it doesn't work very well :s

Do you have any hints?

Upvotes: 2

Views: 977

Answers (1)

James Allardice
James Allardice

Reputation: 165971

Assuming I've understood the question correctly then I would stop using mousemove and instead delegate mouseenter and mouseleave event handlers to elements that should trigger the overlay:

$("body").on("mouseenter", ".Box", function () {
    // Show the overlay
}).on("mouseleave", ".Box", function () {
    // Hide the overlay
});

Because the overlay is then on top of the element it will not work nicely when you move the mouse around within the element itself. To resolve this you can add a CSS property to the overlay:

#over {
    /* ... */
    pointer-events: none;
}

Here's a working example.

Upvotes: 4

Related Questions