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.