jQuery悬停（）闪烁/淡入淡出

发布于 2024-11-06 07:44:03 字数 1150 浏览 0 评论 0原文

当鼠标悬停在图像“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？

原文

Trying to get an image "B" to overlay over image "A" when mouse hovers over image "A". Ideally i want it to 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 is every time the mouse moves it retriggers the hover effect meaning it blinks on and off as it retriggers every pixel the mouse moves. How can I make it only trigger the second action when we leave the container div, not just move about within it?

Thanks for any help.

[EDIT]

CSS:

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

Basically it just sits this div on top of the other. I don't think it's really relevant? Unless the z-index is messing things up.

[EDIT 2]

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

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

Seems a little unnecessary to me but who am I to criticise jQuery?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哑 2024-11-13 07:44:03

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

应该有效！

What about getting your 2 images within a same container and apply your hover triggering on this 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 !

回复收藏 0 原文

~没有更多了~