將鼠標懸停在外的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獲取鼠標移至的元素

回答

相關問題