jQuery div flickering when moving over trigger image

Question

Hi,

I have a div that appears when you mouseover a certain image:

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

Surely mouseleave is only called to make the div not visible when the mouse leaves the image, not while its moved around on it?

Thanks.

Answer 1

If the pop-up shows up under the mouse, the mouseleave function will be called for the img. Make sure your pop-up doesn't show up directly under the mouse.

Edit:

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

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

Aka, make it show up when you enter the image, but disappear when you leave the pop-up.

Answer 2

John Gietzen gives good advice. Let me elaborate a bit. If your #popup-test div shows up under the mouse, the mouseleave event will fire for #link-test-img.

Now, if your #popup-test div is an image itself, and is meant to replace the image that is moused over, you can use a little-used CSS property of the IMG element, background-image. In this case, you create a transparent PNG (i.e., one that has an alpha-transparency of 0, so that everything will show through it) to the dimensions of your first image, then assign the background-image style of the PNG, which we will call clear.png here and give an ID of "clear01", to the source URL of the #link-test-img.

In CSS, you would set the style rule

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

In Javascript, you would set it thus:

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

In JQuery you would say:

$('#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)');
});

You don't have to go through a lot of gyrations and futz with all those events firing. But, as I mention above, this only works if your popup-test div is only used to show a different image. If it is showing different content, and is poppping up under the mouse, don't assign the mouseleave function event handler to the first image. Instead, assign it to the popup-test div, with the same code you have above, like so:

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

If the div is NOT popping up under the mouse, i.e., it is getting shown elsewhere on the page, and you want the original link-test-img to remain in view, and this is NOT happening, you have other problems. In that case, if you can provide more code or point to the page you can get more detailed help.

Hope this helps.