Mouseover/Mouseout, MouseEnter/MouseLeave, Проблема мельницы паха

Question

У меня есть девчонка с изображением внутри него. Когда я наведу изображение, я создаю Divt Toolpip, который абсолютно позиционируется на части изображения (важна абсолютная позиция). Он содержит заголовок и альт.

Это все хорошо и хорошо, пока вы не покинете коробку для подъема инструментов. Он не пузырится и думает, что я больше не парят над изображением, что делает коробку для вытягивания инструментов. Но затем он регистрируется, я снова зависаю изображением, и он переходит взад -вперед между показом ящика для подъема инструментов и скрыванием его.

Таким образом, проблему мерцающей.

Есть множество постов, так что о проблеме мерцания, и я попробовал так много решений, но ни один из них не работал. Я пробовал Mouseover/Mouseout, Mouseenter/Mouseleave, Hover и даже использование Live () в сочетании с ними. Я даже перешел от создания подъема инструментов с нуля на пустой див, чтобы он был в 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

Проблема: а) вам нужно использовать мышиные / мышиные и б) Div для подъема инструментов, чтобы жить внутри элемента, у которого есть слушатели Mouseenter / Mouseleave.

например:

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