Jquery - How do I fix this Image Rollover?

Question

Hi Guys I have this little Jquery script: link text

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
}); 

I works fine, but I want to be able to hover over the Text located in the Image, every time I try, it just keeps "bouncing"

Any help is much appreciated, thanks, Keith

Answer 1

Good question.

The problem seems to be that when the mouse is over the paragraph, the mouse is no more over the image. So the paragraph is hidden. When the paragraph is hidden, the mouse is again over the image, and so the paragraph is shown again. And so on...

A good solution is to use mouseenter and mouseleave events instead of mouseover and mouseout:

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

The major difference between mouseenter/mouseleave events and mouseover/mouseout events is that the former don't bubble.

In this example, the child paragraph of div#image still receive the mouseenter/mouseleave events (even if you aren't listening for them) but the events won't bubble up to their parent element. See this page fore extended discussion on it.

You also have to assign the event no more to the img tag, but to the containing div. It should not be a problem.