Mouseover / mouseout, mouseenter / mouseleave, проблема мерцания при наведении - PullRequest
0 голосов
/ 07 сентября 2011

У меня есть 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();
});

1 Ответ

1 голос
/ 07 сентября 2011

Проблема в том, что а) вам нужно использовать mouseenter / mouseleave и b) div всплывающей подсказки должен находиться внутри элемента, у которого есть слушатели mouseenter / mouseleave.

Например:

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