忽略鼠標事件重疊的div

項A
項B
項C
詳細信息（隱藏）

所需的效果是將鼠標懸停在項目框上時將顯示詳細信息框，並且一旦被隱藏就會隱藏。在顯示時，「詳細信息」框將與「項目」框右側的大約20％重疊。

不過，我發現了當前錯誤的效果是，當我將鼠標懸停只是任何的項目框的右邊，它進入的顯示和隱藏的細節箱的永恆循環。大概是因爲它觸發了Item框的mouseout事件（當Details被顯示時），但是當Details框被隱藏時立即再次觸發mouseover事件。我想知道如何解決這個問題。

我當前的代碼是：預付的任何指針

$('div.item').hover(
    function() { 
     $(this).showDetails(); 
    }, 
    function() { 
     $(this).hideDetails(); 
    } 
);

謝謝！這裏是jsfiddle鏈接，任何人都無法想象它。嘗試將鼠標懸停在右側的項目框上，稍稍移動鼠標，您將看到閃爍發生。

http://jsfiddle.net/s6CjP/1

澤維爾，我已經嘗試過appendTo的細節中，但我想要的效果是，我想有僅指定可操作格（即項目）的鼠標事件。經過一番研究，我甚至不太清楚，如果這是可能的，因爲詳細信息框覆蓋我無法可視化你的問題的股利（因此不能夠將事件附加的東西在它下面）

來源

2011-02-02 Nando

。它不清楚細節框在所有情況下看起來是否相同，以及頁面上的項目div是什麼，以及相互之間的關係。

請您可以創建一個JSFiddle它粘貼在那裏一些CSS，HTML和JS。然後我可以看看。

來源

2011-02-02 01:12:38 seamusjr

一種解決方法是將有細節DIV是你要懸停在該項目的子項。這樣的指針仍然是「在」正確的項目時，它在細節DIV，並且不發送鼠標移出，直到鼠標離開都資料覈實。你至少可以通過兩種方式做到這一點：

有一個單獨的細節DIV爲每個項目的DIV（他們都會有不同的細節，對不對？）。
猛拉細節DIV出的DOM，並追加到您的showDetails（正確的項目DIV）功能。

你必須做一些CSS技巧來讓它像你想要的那樣顯示，但只要父子關係在那裏，你就不必擔心錯誤的鼠標事件。

希望這會有所幫助！

來源

2011-02-02 01:16:28

試試這個：

我覺得是找什麼年爲：

HTML：

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div> 
<br /> 
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div> 
<br /> 
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div> 
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none"> 
</div>

JAVASCRIPT：

$(".divItem").mousemove(function(e){ 
    var left = e.pageX + 10 + "px"; 
    var top = e.pageY + 20 + "px"; 

    $("#divMove").show().css("top",top).css("left",left).css("position","absolute"); 
}).mouseout(function(){ 
    $("#divMove").hide(); 
    }).mouseenter(function(){ 
     $("#divMove").text($(this).text());  
});

CLICK HERE TO SEE THE SAMPLE

來源

2011-02-02 08:16:38 Sukhjeevan

南多，這裏有一些更好的答案，但我只是想把它放在那裏，儘管我確信你已經嘗試過了。

特別是因爲你使用的是hover（），這聽起來有點像你遇到了什麼可能是一個非常簡單的問題。

我敢肯定你試過停止（真的，真的）吧？

// 
$('div.item').hover(
    function() { 
     $(this).stop(true, true).showDetails(); 
    }, 
    function() { 
     $(this).stop(true, true).hideDetails(); 
    } 
); 
//

來源

2011-02-02 16:40:51

忽略鼠標事件重疊的div

回答

相關問題