jQuery hover() flickering/fading -

trying image "b" overlay on image "a" when mouse hovers on image "a". ideally want fade in.

html:

    <div id="prod-image">         <img src="../imgs/products/mens/image-a.jpg" class="box-shadow" />     </div>     <div id="prod-overlay">         <img src="../imgs/image-b.jpg" />        </div> 

jquery:

    $(function() {     $("#prod-image").hover(function() {         $(this).next().fadein().show();     }, function() {         $(this).next().fadeout().hide();     });      }); 

problem every time mouse moves retriggers hover effect meaning blinks on , off retriggers every pixel mouse moves. how can make trigger second action when leave container div, not move within it?

thanks help.

[edit]

css:

    #prod-overlay {     display: none;     position: absolute;         z-index: 999;     top: 0px;     } 

basically sits div on top of other. don't think it's relevant? unless z-index messing things up.

[edit 2]

for might care/stumble across this... fixes it:

$("#prod-image").hover(function() {     $("#prod-overlay").stop(true).fadeto("normal",1); }, function() {     $("#prod-overlay").fadeto("normal",0); });  

seems little unnecessary me criticise jquery?

what getting 2 images within same container , apply hover triggering on container?

<div  id="container">     <div id="prod-image">         <img src="../imgs/products/mens/image-a.jpg" class="box-shadow" />     </div>     <div id="prod-overlay">         <img src="../imgs/image-b.jpg" />        </div> </div> 

and

$(function() { $("#container").hover(function() {     $("#prod-overlay").fadein().show(); }, function() {     $("#prod-overlay").fadeout().hide(); });  }); 

it should work !