Mouseover/mouseout，mouseenter/mouseleave，懸停閃爍問題

我有一個div裏面有一個圖像。當我將圖像懸停時，我創建了一個絕對定位在圖像部分上的工具提示div（絕對位置很重要）。它包含標題和替代文字。Mouseover/mouseout，mouseenter/mouseleave，懸停閃爍問題

這一切都很好，直到你懸停工具提示框。它不會冒泡，它認爲我不再徘徊在圖像上，從而使工具提示框消失。但之後它會註冊我將鼠標懸停在圖像上，並在顯示工具提示框和隱藏它之間來回移動。

因此閃爍的問題。

有關於閃爍問題的一堆帖子，我已經嘗試了這麼多的解決方案，但沒有一個工作。我試過Mouseover/mouseout，mouseenter/mouseleave，懸停，甚至使用live（）與它們結合。我甚至從創建工具提示切換到空白的div，所以當頁面加載時，它會在DOM中，以防出現問題。我真的不知道該做什麼了。這是我目前的代碼。

$("img").bind("mouseover", function() { 
    var pimg = $(this); 
    var position = pimg.position(); 
    var top = position.top; 
    var left = position.left; 
    var title = $(this).attr('title'); 
    var alt = $(this).attr('alt'); 
    $('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>'); 
}); 

$("img").bind("mouseout", function() { 
    $('.toolTip').empty(); 
});

來源

2011-09-06 Ark-of-Ice

的問題是）你需要使用的mouseenter /鼠標離開和b）的提示DIV需要生活具有的mouseenter /鼠標離開聽衆裏面的元素。

如：

<div id="mouseoverdiv"> 
<div class="tooltip">some text</div> 
<img src="" /> 
</div>

來源

2011-09-06 22:47:46 SublymeRick

我已經試過了mouseenter /鼠標離開的解決方案（在標題中提到的），但我還沒有嘗試過的聽衆移動到一個更高的元素。從我的例子中可以看出，我已將它附加在圖像上。我將它移動到共享的父級並切換到mouseenter/mouseleave，並在一個小時左右回來告訴你它是如何去的。 –

快速的問題，我直接針對img，因爲div中有多個圖像彼此相鄰，如果偵聽器位於父級上，我如何定位鼠標結束的圖像？ –

是的，請等待！我很確定你得到這種閃爍的原因是因爲使用mouseenter/mouseleave時，冒泡只在子元素包含在具有偵聽器的元素中時才起作用。在那裏，當你懸停工具提示時，註冊爲鼠標的方式就離開了，因爲工具提示元素不在圖像標籤「內部」（正如它應該的那樣）。然後，一旦提示消失，繁榮，你的形象再次。 – SublymeRick

Mouseover/mouseout，mouseenter/mouseleave，懸停閃爍問題

回答

相關問題