使用jQuery检查mouseleave（）上光标所在的元素？

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

我希望能够发现它们之间的区别

Moving the mouse from bubble #1 to the grid
将鼠标从气泡＃1移动到网格
Moving the mouse from bubble #1 directly to another bubble, such as bubble 2
将鼠标从气泡＃1直接移动到另一个气泡，例如气泡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.

我试图在.mouseleave（）中使用$（this），即使是泡泡，但是它会记录你要离开的元素而不是你当前正在悬停的元素。

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

关于如何在mouseleave（）上获取鼠标移动元素的任何想法？

2 个解决方案

#1

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

您需要使用event.toElement || e.relatedTarget：

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

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

（编辑注意|| e.relatedTarget以确保浏览器兼容性）

#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.

如果你可以使用常规javascript，那么每个事件（e）鼠标移出和鼠标移出都会在大多数浏览器中都有一个e.relatedTarget。＃9之前的IE有event.toElement和event.fromElement，具体取决于你是在听mouseover还是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
}

#1