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放在另一个上面。我不认为这是真的相关吗？除非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();
}); 
});

它应该有用！

jQuery hover（）闪烁/淡入淡出

1 个答案: