Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check what element the cursor is on upon mouseleave() with jQuery?

I have a set of list elements (<li> within a <ul>) laid out as bubbles on a chart like this, where the bubbles are the <li> elements:

http://i.stack.imgur.com/PR7vR.png

I want to be able to detect the difference between

  1. Moving the mouse from bubble #1 to the grid
  2. Moving the mouse from bubble #1 directly to another bubble, such as bubble 2

I've attempted to use $(this) in the .mouseleave() even for a bubble, but it registers the element that you're leaving rather than the element that you're currently hovering.

Any ideas on how to get the element that the mouse is moving onto upon mouseleave()?

like image 209
Tyler Nieman Avatar asked Oct 13 '11 22:10

Tyler Nieman


People also ask

How do you check if an element is hovered?

You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.

What is the working of Mouseleave event in jQuery?

The mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs. Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements.

What is the difference between Mouseout and Mouseleave?

This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

What is Mouseout in jQuery?

jQuery mouseout() Method The mouseout() method triggers the mouseout event, or attaches a function to run when a mouseout event occurs. Note: Unlike the mouseleave event, the mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.


2 Answers

You need to use event.toElement || e.relatedTarget:

$('li').mouseleave(function(e) {     // new element is: e.toElement || e.relatedTarget }); 

(Edited to note || e.relatedTarget to ensure browser compatibility)

like image 162
N Rohler Avatar answered Sep 29 '22 04:09

N Rohler


If you can use ordinarey javascript, every event (e) mouse over and mouse out has an e.relatedTarget in most browsers. IE before #9 has event.toElement and event.fromElement, depending on if you are listening to a mouseover or mouseout.

somebody.onmouseout=function(e){   if(!e && window.event)e=event;   var goingto=e.relatedTarget|| event.toElement;   //do something } somebody.onmouseover=function(e){   if(!e && window.event)e=event;   var comingfrom=e.relatedTarget|| e.fromElement;   //do something } 
like image 37
kennebec Avatar answered Sep 29 '22 03:09

kennebec