悬停时的JQuery获取鼠标已移动到的元素

Question

我有一个导航系统，它在某些元素上具有单级下拉菜单。我已经让它按照我想要的方式工作了，除了当鼠标沿着它移动时很容易掉出导航的底部（这是第二条全宽线下拉内联项目）。

我需要一种方法来阻止导航在您掉出底部时消失，而不会干扰其他导航项（这样当您将鼠标悬停在它们上方时它们仍会立即隐藏导航）。

有没有办法在调用悬停事件时找到您正在鼠标移动的元素？通过这种方式，我可以检测他们是否将鼠标悬停在身体​​上，并启动一个计时器以在 1000 毫秒内隐藏导航。

我尝试过 hoverIntent 但这不能满足我的需要，因为我无法承受从一个导航项目移动到另一个导航项目的延迟......这使得导航非常难以使用！

或者有没有办法使用鼠标位置来检测它们是否已经从导航底部掉了出来？

任何帮助将不胜感激。当前导航的 Jquery 如下。

var navDisplayTimer;
var navDisplayObject;
$("#main-nav > li").addClass("js-enabled");
$("#main-nav > li").hover(function(){
 $(this).addClass("hovered");
 if ($(this).find("ul").length != 0) {
  $(this).parent().stop().animate({borderWidth: "22px"}, 400);
  if($(this).parent().css("borderWidth") == "22px 22px 22px 22px") {
   $(this).find("ul").show();
  } else {
   navDisplayObject = this;
   navDisplayTimer = setTimeout(function() {
    $(navDisplayObject).find("ul").show();
   }, 300);
  }
 }
},function(){
 clearTimeout(navDisplayTimer);
 $(this).find("ul").hide();
 $(this).parent().stop().animate({borderWidth: "2px"}, 400);
 $(this).removeClass("hovered");
});

Answer 1

与您当前可行的方法稍有相反的是，当用户离开菜单 div 时触发事件，但使用超时来执行此操作。

除此之外，当您将鼠标悬停在菜单 div 中的导航项上以清除关闭超时时，将触发一个事件。

这会给用户和机会让鼠标重新进入。试试看，看看你的想法。

$('#selectednavigationdiv').bind("mouseout", close);
$('#selectednavigationitems').bind("mouseover", function() { clearTimeout(hideTimer ); });// stop drop down menu from being closed

var hideTimer = setTimeout(function() {  }, 1);//initialise so not undefined
function close() {
    clearTimeout(hideTimer );
    hideTimer = setTimeout(function() { $('#selectednavigationdiv').slideUp('fast') }, 1000);//close drop down menu                    
}