jQuery悬停()闪烁/淡入淡出

Question

当鼠标悬停在图像“A”上时，尝试让图像“B”覆盖在图像“A”上。理想情况下，我希望它淡入。

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();
    }); 
    });

问题是每次鼠标移动时，它都会重新触发悬停效果，这意味着它会在重新触发鼠标移动的每个像素时闪烁。如何才能让它在我们离开容器 div 时只触发第二个操作，而不只是在其中移动？

感谢您的帮助。

[编辑]

CSS:

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

基本上，它只是将这个 div 放在另一个 div 之上。我认为这并不真正相关？除非 z-index 搞砸了。

[编辑2]

对于任何可能关心/偶然发现这个问题的人...这可以解决它:

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

对我来说似乎有点不必要，但我有什么资格批评 jQuery？

Answer 1

如何将 2 个图像放入同一个容器中并在此容器上应用悬停触发？

<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>

和

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

应该可以用!