jQuery easing - flipping image on hover

Question

If you take a look at this fiddle: http://jsfiddle.net/5PH8p/

Then you can see if you hover over the blank image, it will flip over and display some text. The problem is though, when you hover also over the paragraph the image will flip.

My question is, how can I change the script so it will only flip the image when mouse is over the image but not the paragraph too.

I would like to keep the paragraph inside the HTML structure where it is now like here

        `<div class="thumb scroll">
                <p>
                  <strong>John Doe</strong><br>
                  CEO & Partner<br>
                  <a href="mailto: jon@doe.dk">jon@doe.dk</a></p>
                     <div class="thumb-wrapper">`

Hope I'm clear enough, thanks in advance.

Answer 1

You can use e.stopPropagation() to prevent event buble up the DOM tree:

$('.thumb p').mouseover(function(e) {
    e.stopPropagation(); 
});