jQuery mouseenter，mouseleave和append的奇怪組合

我把jQuery的mouseenter和mouseleave事件與append的調用結合起來，引起了一個有趣的問題。我的目標是在鼠標進入某個東西時顯示額外的內容，然後在鼠標離開時將其移除。這與在StackExchange上將鼠標懸停在此處時發生的情況非常相似。序列是：jQuery mouseenter，mouseleave和append的奇怪組合

在mouseenter，創建內容，並且經由.offset和.append它由鼠標下的元件進行定位。
在mouseleave中，從屏幕上刪除該內容。

我操作的元素是img，我使用的是jQuery 1.6.2。問題在於，.append以某種方式觸發mouseleave，緊接着是.mouseenter，無限無盡。它對被添加的內容顯示爲一種奇怪的閃爍效果，因爲它被反覆刪除並重新添加。在jsFiddle上看到一個例子here。爲什麼會發生這種情況，我該如何解決？

編輯：想通了。 D'哦。添加的內容出現在鼠標下。

來源

2011-08-04 Tom Hamming

沒有ü嘗試使用鼠標懸停及移出？ –

我*認爲*這些類型的東西通常附加到身體，絕對定位和屏幕外。鼠標懸停只是將左側/頂部更改爲元素下方。它已經加載並且對dom的侵入性比添加/刪除更少。 – Marc

發生這種情況的原因是，您要在鼠標所在的位置添加內容。這個新的內容不是你原來的元素的一部分，所以根據定義，當你展示新的DIV時，你的鼠標不會再經過IMG。

解決此問題的一種方法是將圖像用作父DIV的背景，然後將新DIV附加到父級，以便新DIV是父級的子級。

在旁註中有沒有你選擇不使用.hover（）的原因？

這是一個工作jsfiddle爲我如何做到這一點。

HTML：

<div class="papa"> 
    <div class='myDiv'> 
     <div id='divHover'>Hello World</div> 
    </div> 
</div>

使用Javascript/jQuery的：

$(document).ready(function() { 
    $(".papa").hover(
     function() { 
     $(".myDiv").show(); 
     }, 
     function() { 
     $(".myDiv").hide(); 
     } 
    ); 
});

CSS：

.papa { 
    background-image:url('http://dummyimage.com/100x100/000/fff'); 
    height: 100px; 
    width: 100px; 
} 
.myDiv { 
    display: none; 
    height: 30px; 
    border: 1px solid black; 
} 
#divHover { 
    width:100px; 
    height:20px; 
    background-color:white; 
    border:1px solid black; 
    position: relative; 
    top: 10px; 
    left: 10px; 
}

來源

2011-08-04 21:07:40 kasdega

我注意到了這一點，並更新了這個問題，但我會給你點這個。我使用'.hover（）'，我只是沒有將它轉換成jsFiddle。 –

@傑弗遜先生LOL謝謝！剛看到你的編輯。有時在我提交答案之後纔會看到更新，有時更新會更及時。 – kasdega

jQuery mouseenter，mouseleave和append的奇怪組合

回答

相關問題