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

Thanks for the reply,

that does what I already have. What I want is when I hover over the paragraph, that it stays there, and not "bounce" about

cheers, Keith

Answer 2

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.

Answer 3

That is absolutely perfect Alexmeia, exactly what I need. Can I ask you what's the difference between using bind and hover? thanks again, Keith.

Also, I haven't got a clue why you have a -1, I can't give rep yet, somebody else must have done that. It doesn't make sense as the solution is correct