悬停时的 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                    
}