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();
   });
});

你可以在这里尝试一下,或添加一些淡入淡出的动画,就像这样.