Проверьте, какой элемент курсора находится на mouseleave() с помощью jQuery?

У меня есть набор элементов списка (<li> внутри <ul>), выложенный как пузырьки на такой диаграмме, где пузырьки являются элементами <li>:

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

Я хочу видеть разницу между

Перемещение мыши из пузырька # 1 в сетку
Перемещение мыши из пузырька # 1 прямо в другой пузырь, например, пузырь 2

Я попытался использовать $(this) в .mouseleave() даже для пузырька, но он регистрирует элемент, который вы оставляете, а не тот элемент, который вы сейчас висите.

Любые идеи о том, как получить элемент, на который движется мышь на mouseleave()?

Ответ 1

Вам нужно использовать event.toElement || e.relatedTarget:

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

(Отредактировано для заметок || e.relatedTarget для обеспечения совместимости с браузером)

Ответ 2

Если вы можете использовать javascript ordinarey, каждое событие (e) мышь и мышь e.relatedTarget в большинстве браузеров. IE до # 9 имеет event.toElement и event.fromElement, в зависимости от того, прослушиваете мышь или мыши.

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
}