我希望获得一个漂亮的平滑翻转图像,以便在父图像上淡入一组按钮。
我的叠加图像叠加在我的主图像上,并设置为“display:none;”。
我有以下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 -->
答案 0 :(得分:5)
请改为尝试:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
我认为将鼠标悬停在图像本身上是一个坏主意,我在这里使用父容器。此外,使用on()方法现在是触发鼠标进入和离开事件的首选方法。
祝你好运!答案 1 :(得分:1)
.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; }
答案 2 :(得分:1)
迈克尔的回答是好的,并且会有效,但最好使用CSS transitions作为动画,并为行为保留jQuery。
这是demo。
的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;
}
这是前一种方法的demo(类似于迈克尔的回答)。此外,您的CSS已针对这两个示例进行了清理。