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

Question

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()?

Solution 1

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)

Solution 2

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
}

Comments

[N Rohler]

Note edit I added above based on good call by @kennebec - to ensure that you have browser compatibility, it's a good idea to reference e.toElement || e.relatedTarget instead of just e.toElement