我有这个HTML结构:
<div class="shadow"></div>
<div id="slide_img">
<ul class="clearfix">
<li><img src="themes/company/img/01.png"></li>
<li><img src="themes/company/img/02.png"></li>
<li><img src="themes/company/img/03.png"></li>
<li><img src="themes/company/img/04.png"></li>
<li><img src="themes/company/img/05.png"></li>
<li><img src="themes/company/img/01.png"></li>
</ul>
</div>
我的img上的阴影div并获得不透明效果。但是当悬停在img上时,删除这个阴影div。
影子CSS:
.shadow {
background: none no-repeat scroll center center #000000;
height: 250px;
left: 0;
margin: 0;
opacity: 0.7;
padding: 0;
position: absolute;
width: 1838px;
z-index:2;
}
我怎么能通过jQuery做到这一点?
答案 0 :(得分:7)
将.shadow
div 放在 #slide_img
中,您可以使用纯CSS执行此操作:
#slide_img:hover .shadow{
display: none;
}
答案 1 :(得分:0)
$("#slide_img img").on('mouseenter mouseleave', function() {
$('.shadow').toggle(e.type=='mouseenter');
});
答案 2 :(得分:0)
如果您想临时隐藏此用途
$(document).ready(function(){
$('#slide_img img').hover(
function(){
// When hover the #slide_img img hide the div.shadow
$('div.shadow').hide();
},function(){
// When out of hover the #slide_img img show the div.shadow
$('div.shadow').show();
}
);
});
ex.on jsFiddle Here
否则你想绝对删除此用途
$('#slide_img img').hover(function(){$('div.shadow').remove();});