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

javascript jquery nested mouseover mouseleave
Tyler Nieman picture Tyler Nieman · Oct 14, 2011 · Viewed 15.1k times · Source

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

Answer

N Rohler picture N Rohler · Oct 14, 2011

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)

Related questions

Accessing nested JavaScript objects and arrays by string path

I have a data structure like this : var someObject = { 'part1' : { 'name': 'Part 1', 'size': '20', 'qty' : '50' }, 'part2' : { 'name': 'Part 2', 'size': '15', 'qty' : '60' }, 'part3' : [ { 'name': 'Part 3A', 'size': '10', 'qty' : …

Read More
Best way to create nested HTML elements with jQuery

If I need to create a couple of nested DOM elements, I know one way to do it, is to write them as long string and then place them in the document using a suitable jQuery function. Something like: elem.…

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More