fadeout happens before mouse hovers off element - bubbling?

fadeout happens before mouse hovers off element - bubbling?

I have a text item overlaying a picture set to fade in on mouseover and fade out on mouseout. It works fine if I mouse over the top of the picture, but if I mouse over the bottom, where the div containing the text item is (class .popper), the text fades in, but then fades out of its own accord, before I mouse out. How do I stop this? Here's the code. Thanks.

.popper {position:absolute;bottom:0;left:0;padding:20px;background-color:lightblue;opacity:.7;filter:alpha(opacity=70);display:none; }

<div style="position:relative;width:300px"><img src="1d6.jpg" width="300" height="200" alt="stuff" />
  <div class="popper">Content for New Div Tag Goes Here and here and here and here and hear and here</div>
</div>

<script type="text/javascript">
    jQuery('img').hover(function(){jQuery('.popper').fadeIn(3000)},function(){jQuery('.popper').fadeOut(3000)});
</script>

I guess this is "bubbling" of some sort since ithe hover works in the top div, but fails in the div within a div, but I'm a tad unclear on bubbling

--- Jim Mooney