jquery:悬停时仅显示一个div

Question

嘿伙计们，我在这个小脚本上遇到了问题。当我将鼠标悬停在 div“item”上时，两个 div 都会显示“dark-overlay”。但我只想显示悬停在 div 内的深色覆盖层。这怎么可能？谢谢:)

<小时/>

.item {
position:relative;
width:680px;
height:140px;
}
.dark-overlay {
position:absolute;
width:680px;
height:140px;
background:url(images/bg.png) repeat;
display:none;
}

<小时/>

<div class="item">
   <div class="dark-overlay"></div>
   <img src="my image.jpg" />
</div>

<div class="item">
   <div class="dark-overlay"></div>
   <img src="my image.jpg" />
</div>

<小时/>

$(function() {
   $(".item").hover(function() {
      $(".dark-overlay").show();
   });
});

Answer 1

您只能在您悬停的区域内找到 .dark-overlay，如下所示:

$(function() {
   $(".item").hover(function() {
      $(this).find(".dark-overlay").show();
   });
});

或者，更有可能的是，您希望它在离开时也隐藏，在这种情况下您应该使用 .toggle()像这样:

$(function() {
   $(".item").hover(function() {
      $(this).find(".dark-overlay").toggle();
   });
});

You can give it a try here ，或添加一点淡入淡出动画，like this .