![](/img/trans.png)
[英]postbutton fadein when mouseover comment box, but fades out when mouseover postbutton
[英]JQUERY image overlay fadeIn() fades in and out when mouseover
我希望获得一个很好的平滑过渡图像,以便在父图像上淡入淡出一组按钮。
我将叠加图像堆叠在主图像的顶部,并将其设置为“显示:无;”。
我有以下jQuery,它适用于FadeIn叠加图像,但是当鼠标悬停在图像上方时,它会反复淡入和淡出。 我的jQuery语法有问题吗? 提前致谢。
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
和我的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 -->
尝试以下方法:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
我认为将鼠标悬停在图像本身上不是一个好主意,这里我使用父容器。 而且,现在使用on()方法是触发鼠标进入和离开事件的首选方法。
祝好运!
在这种情况下,css就足够了,请尝试以下代码
.main:hover + .overlay{ display:block; }
并确保叠加层具有较高的z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
优雅的褪色
.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; }
Michael的答案是一个很好的答案,并且可以用,但最好使用CSS过渡制作动画,并保留jQuery的行为。
这是一个演示 。
的JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
的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;
}
这是前一种方法的演示 (类似于Michael的回答)。 此外,您的CSS已针对这两个示例进行了清理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.