JQuery DIV мерцает при движении по спускового изображения

Question

У меня есть DIV, который появляется, когда вы наведите курсор мыши на определенный образ:

$('#link-test-img').mouseenter(function() { 
     $('#popup-test').css('display','block'); 
    }); 
    $('#link-test-img').mouseleave(function() { 
     $('#popup-test').css('display','none'); 
    }); 

Конечно MouseLeave только призван сделать DIV не видно, когда мышь покидает изображение, не в то время как его перемещали на нем?

Спасибо.

Answer 1

Если всплывающее окно появляется под мышью, функция mouseleave будет вызываться для img. Убедитесь, что ваше всплывающее окно не отображается непосредственно под мышкой.

Edit:

$('#link-test-img').mouseenter(function() { 
    $('#popup-test').css('display','block'); 
}); 

$('#popup-test').mouseleave(function() { 
    $('#popup-test').css('display','none'); 
}); 

Ака, сделать его показать, когда вы входите в образ, но исчезают, когда вы выходите из всплывающего окна.

Answer 2

John Gietzen дает хороший совет. Позвольте мне кое-что уточнить. Если ваш # popup-test div появится под мышью, событие mouseleave будет срабатывать для # link-test-img.

Теперь, если ваш # popup-test div является самим изображением и предназначен для замены изображения, которое вымыли, вы можете использовать малоиспользуемое свойство CSS элемента IMG, background-image. В этом случае вы создаете прозрачный PNG (то есть тот, у которого есть альфа-прозрачность 0, так что все будет отображаться через него) до размеров вашего первого изображения, а затем назначьте стиль фонового изображения PNG, который мы назовем clear.png здесь и дадим идентификатор «clear01», к исходному URL-адресу # link-test-img.

В CSS, вы должны установить правило стиля

background-image: url(http://your.link-test-img.url); 

В JavaScript, вы бы установить его таким образом:

document.getElementById("clear01").style.backgroundImage = "url(http://your.link-test-img.url)"; 

В JQuery вы сказали бы:

$('#clear01').mouseenter(function() { 
    $('#link-test-img').css('background-image','url(http://your.link-test-img.url)'); 
}); 
$('#clear01').mouseleave(function() { 
    $('#link-test-img').css('background-image','url(http://your.popup-test-img.url)'); 
}); 

Вы не нужно проходить через множество кругов и футов со всеми этими событиями. Но, как я упоминал выше, это работает, только если ваш всплывающий тестовый div используется только для отображения другого изображения. Если он показывает различный контент и подпрыгивает под мышью, не назначайте обработчик события функции mouseleave на первое изображение. Вместо этого, назначить его на всплывающее окно испытаний DIV с тем же кодом у вас есть выше, например, так:

$('#link-test-img').mouseenter(function() { 
    $('#popup-test').css('display','block'); 
}); 
$('#popup-test').mouseleave(function() { 
    $('#popup-test').css('display','none'); 
}); 

Если ДИВ НЕ выскакивают под мышкой, то есть, это становится показано в другом месте на странице , и вы хотите, чтобы исходный link-test-img оставался в поле зрения, и это НЕ происходит, у вас есть другие проблемы. В этом случае, если вы можете предоставить больше кода или указать страницу, вы можете получить более подробную помощь.

Надеюсь, это поможет.