mouseenter/mouseleave受嵌套子對象的影響

我正在隱藏文檔準備就緒的控制面板（myNestContainer）。我有一個名爲navMyNest的按鈕，當mouseenter發生時，顯示myNestContainer。這工作正常。mouseenter/mouseleave受嵌套子對象的影響

的問題是，我希望用戶能夠探索控制面板，但鑑於有嵌套DIV容器在myNestContainer，只要輸入之一，mouseleave生效，面板關閉控制。

這是工作好得多，然後mouseenter/mouseout，但仍然沒有我想要的功能。

有關如何覆蓋子對象的任何想法，以便在用戶查看時控制面板保持打開狀態？

在此先感謝。

$(document).ready(function() { 
$("div#myNestContainer").hide(); 
}); 

$("div#navMyNest").live("mouseenter", function(event) { 
    $("div#myNestContainer").show(); 
}); 

$("div#myNestContainer").live("mouseleave", function(event) { 
    $("div#myNestContainer").hide(); 
});

來源

2011-12-07 Jason Moore

千萬不要'div＃myNestContainer'，忽略'div'部分。它會顯着減慢選擇器的速度。只要做'＃myNestContainer'。另外，儘量不要多次運行相同的選擇器。請將其存儲在變量中。最後，當你在'live'回調函數中時，'this'被設置爲你調用它的DOM元素。因此，不要再對你的'hide'和'show'進行選擇，而是執行'$（this）.hide（）;'。 –

@AdamTerlson：好點。另外值得一提的是，由於jQuery 1.7'live（）'被棄用，而贊成'on（）'。 – Tadeck

@Tadeck對，絕對值得一提。 –

你可以使用jQuery懸停功能來克服這個問題...

http://api.jquery.com/hover/

它基本上處理您當前所面臨的問題。使用下面的代碼段

$("div#myNestContainer").hover( 

    function() { 
    $("div#myNestContainer").show(); 
    }, 

    function() { 
    $("div#myNestContainer").hide(); 
    } 
);

來源

2011-12-07 17:03:38

但我使用div＃navMyNest顯示控制面板開始...他們如何將鼠標懸停在隱藏在文檔準備好的項目上？ –

你能分享你的HTML –

我不得不求助於大量醜陋的黑客獲取這種類型的工作的事情。這也是針對瀏覽器的黑客攻擊。就我而言，我的嵌套元素中有iframe元素。

我不得不使用延遲/超時，獲取鼠標的（x，y）位置，並響應mousemove事件。

基本上，您必須定期檢查，直到鼠標位於邊界區域之外，然後移除元素。

我用一個淡出效果來刪除元素，使滯後時間有點不明顯。

看到它在行動在右上角實徘徊「F」圖標：http://www2.highpoint.edu/

來源

2011-12-07 17:05:39 Teddy

也是一個很好的建議，我喜歡淡入淡出效果 - 非常乾淨。將納入。 –

使用event.relatedTarget保持父元素如果鼠標移動到嵌套元素可見。

$('#myNestContainer').mouseout(function(e) 
{ 
    var evt = e || window.event; 
    if (evt.relatedTarget != document.getElementById('navMyNest')) 
    { 
     $("#myNestContainer").hide(); 
    } 
});

來源

2011-12-07 17:07:36 Aaron

你贏了！這就是答案:) –

很高興我可以幫忙！ – Aaron

@JasonMoore然後請批准答案。點擊它左側的勾號，在投票計數下。 – jibiel

mouseenter/mouseleave受嵌套子對象的影響

回答

相關問題