javascript 鼠标悬停时 JQUERY 图像叠加淡入淡出淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18537848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQUERY image overlay fadeIn() fades in and out when mouseover
提问by 916 Networks
I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
我希望在一组按钮的父图像上淡入淡出一个漂亮的平滑翻转图像。
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
我将叠加图像堆叠在主图像上，并将其设置为“显示：无；”。
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
我有以下 jQuery，它可以淡入叠加图像，但是当鼠标悬停在图像上时，它会反复淡入淡出。我的 jQuery 语法有问题吗？提前致谢。
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
和我的 HTML 代码：
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->
回答by Michael Giovanni Pumo
Try this instead:
试试这个：
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
我认为将鼠标悬停在图像本身上是一个坏主意，在这里我使用父容器。此外，使用 on() 方法现在是触发鼠标进入和离开事件的首选方式。
Good luck!
祝你好运！
回答by Michael Giovanni Pumo
css is enough in this case, try the below code
在这种情况下 css 就足够了，请尝试以下代码
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
并确保叠加层具有更高的 z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
for graceful fading
为了优雅的褪色
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
回答by JWK
Michael's answer is a good one and will work, but it may be preferable to use CSS transitionsfor the animation and reserve jQuery for the behavior.
Michael 的回答很好并且会奏效，但最好为动画使用CSS 转换并为行为保留 jQuery。
Here's a demo.
这是一个演示。
JavaScript
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demoof the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.
这是前一种方法的演示（类似于迈克尔的回答）。此外，您的 CSS 已针对这两个示例进行了清理。
