鼠標懸停/鼠標停留，鼠標進入/搖動，懸停閃爍問題

Question

我有一個div，里面有一個圖像。 當我將鼠標懸停在圖像上時，將創建一個絕對位於圖像部分上方的工具提示div（絕對位置很重要）。 它包含標題和替代文本。

除非將鼠標懸停在工具提示框上，否則一切都會很好。 它不會冒泡，它認為我不再將鼠標懸停在圖像上，從而使工具提示框消失了。 但是隨后它注冊，我再次將鼠標懸停在圖像上，它在顯示工具提示框和隱藏它之間來回移動。

因此，閃爍的問題。

關於閃爍問題，有很多關於SO的文章，我嘗試了很多解決方案，但沒有一個起作用。 我已經嘗試過Mouseover / mouseout，mouseenter / mouseleave，hover，甚至將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();
});

Answer 1

問題是：a）您需要使用mouseenter / mouseleave； b）工具提示div需要位於具有mouseenter / mouseleave偵聽器的元素內。

例如：

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