JQuery: показывать только один div при наведении курсора

Question

Эй, ребята, у меня проблема с этим небольшим сценарием.При наведении курсора на элемент "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();
   });
});

Вы можете попробовать здесь или добавить немного анимации затухания, какэто .

Answer 2

Это должно сработать, обработчик события hover принимает два аргумента (мышь и мышь), а затем просто ограничивает поиск .dark-overlay элементами внутри "this" (текущий элемент .item)

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