我有一堆图像,当我将鼠标悬停在其中一个图像上时,我希望另一个div显示在其他每个图像上,以使它们"变暗"。它似乎首先起作用,但在那之后就有了自己的想法。
以下是我尝试的:
html:
<div id="hp_imgs">
<div class="imggHolder">
<img src="http://9ammusic.com/images/hp/adele.jpg">
<div class="darkOver"></div>
<div class="showOver">Adele</div>
</div>
<div class="imggHolder">
<img src="http://9ammusic.com/images/hp/michael-buble.jpg">
<div class="darkOver"></div>
<div class="showOver">Michael Buble</div>
</div>
<div class="imggHolder">
<img src="http://9ammusic.com/images/hp/neil-diamond.jpg">
<div class="darkOver"></div>
<div class="showOver">Neil Diamond</div>
</div>
</div>
CSS:
#hp_imgs {
width:66%;
float:right;
display:block;
}
.imggHolder {
width:31%;
float:left;
margin:1%;
position:relative;
cursor:pointer;
}
.showOver {
width:80%;
position:absolute;
bottom:20%;
left:10%;
height:30px;
background:rgba(255, 255, 255, .8);
padding-top:10px;
text-align:center;
display:none;
border-radius:6px;
}
.darkOver {
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
position:absolute;
top:0;
left:0;
display:none;
z-index:10;
}
#hp_imgs img {
float:right;
margin:2px;
border-radius:4px;
display: block;
max-width:100%;
width:auto;
height:auto;
}
JQuery:
$('.imggHolder').mouseenter(function() {
$(this).find('.showOver').fadeIn();
$('.darkOver').fadeIn(); // show all darkOver
$(this).find('.darkOver').hide(); // hide 'this' darkOver
});
$('.imggHolder').mouseleave(function() {
$(this).find('.showOver').fadeOut();
$('.darkOver').fadeOut();
});
有更好的方法吗?
更新我认为发生的事情是fadeIn/FadeOut没有完成
这是一个Fiddle
如果只针对要更改的元素(即兄弟元素),则会有所帮助。此外,请使用.stop()
来防止动画出现问题。
$('.imggHolder').mouseenter(function () {
$(this).find('.showOver').fadeIn();
$(this).siblings().find('.darkOver').stop().fadeIn();
});
$('.imggHolder').mouseleave(function () {
$(this).find('.showOver').fadeOut();
$(this).siblings().find('.darkOver').fadeOut();
});
http://jsfiddle.net/3dWhk/3/
更新
这个答案和@shoked都有问题——如果你移动光标太快,我的解决方案就会出现问题,而@shoked's会让所有的覆盖在图像之间闪烁。您可以通过转移到CSS转换来避免这两个问题,而CSS转换是由一些简单的JS操作的类更改触发的。检查以下内容;
css
.showOver,
.darkOver {
opacity: 0; /* instead of display: none; */
transition: opacity .5s ease;
}
.visible {
opacity: 1;
}
js
$('.imggHolder').hover(function () {
$(this).find('.showOver').addClass("visible");
$(this).siblings().find('.darkOver').addClass("visible");
}, function () {
$('.showOver, .darkOver').removeClass("visible");
});
http://jsfiddle.net/3dWhk/7/
优点:流畅的硬件加速动画,将自动处理转换的开始/停止位置
缺点:IE9不支持http://caniuse.com/css-transitions(将返回到简单地显示/隐藏覆盖而不设置转换动画)
停止当前动画,您可以使用悬停别名:
演示
$('.imggHolder').hover(function () {
$(this).find('.showOver').stop(true,true).fadeIn();
$('.darkOver').stop(true,true).fadeIn();
$(this).find('.darkOver').hide();
}, function () {
$(this).find('.showOver').stop(true,true).fadeOut();
$('.darkOver').stop(true,true).fadeOut();
});