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。

Answer 2

这应该可以做到这一点，悬停事件处理程序接受两个参数（鼠标输入和鼠标输出），然后将.dark-overlay搜索限制为“this”（当前.item元素）中的项目

$('.item').hover(
  function() { // Mouse in
    $('.dark-overlay', this ).fadeIn();
  },
  function() { // Mouse out
    $('.dark-overlay', this ).fadeOut();
  }
);

jquery：悬停时只显示一个div

2 个答案: