将鼠标悬停在外的JQuery获取鼠标移至的元素

我有一个导航系统，其中某些元素具有单个级别下拉菜单。我已经按照我想要的方式工作了，除了在鼠标移动时很容易掉到导航栏的底部（这是第二条全宽线下拉内联项）。将鼠标悬停在外的JQuery获取鼠标移至的元素

我需要的是一种方法，当你跌出底部时不会干扰导航，也不会干扰其他导航项目（这样当你将鼠标悬停在导航上时，导航项目会立即隐藏）。

是否有办法找到你鼠标移动到当悬停出事件被称为元素？通过这种方式，我可以检测出他们是否在身体上移动，并启动一个计时器，以便在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"); 
});

来源

2009-11-04 Dan

如果没有视觉帮助，这是很难理解的......屏幕截图会有帮助。 –

轻微反到当前的做法，可能工作是当用户移离菜单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      
}

来源

2009-11-04 18:29:24 Mike

我没有测试代码，但这个解决方案绝对是要走的路。 –

与一些调整，以适应它到我的具体情况这工作的魅力！我稍微重新考虑了隐藏导航项目的方式，以便让我的代码与您的代码一起工作，但现在它几乎完美了，我可以转向其他东西！非常感谢非常感谢！ – Dan

将鼠标悬停在外的JQuery获取鼠标移至的元素

回答

相关问题