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