jquery: only show one div when hover

Question

Hey guys, i'm having a problem with this little script. When i hover over the div "item" both divs shows the "dark-overlay". But i only want the dark-overlay there's inside the div i hover to show. How is that possible? thanks :)

---

.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

You can find the .dark-overlay only inside the one you're hovering, like this:

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

Or, more likely, you want it to hide when leaving as well, in which case you should use .toggle() like this:

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

You can give it a try here, or add a bit of a fade animation, like this.

Answer 2

This should do the trick, the hover event handler takes two arguments (mouse in and mouse out), then just limit the .dark-overlay search to items within "this" (the current .item element)

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