show image on hover just for the actual hovered element

Question

I have a set of divs built like this with display:none; on .imageholder:

<div class="parent">
<div class="imageholder">
    <img src="img.jpg">
</div>
<div class="parent">
    <div class="imageholder">
        <img src="img.jpg">
    </div>
</div>
<!--and so on...-->

and this jQuery:

$('.parent').hover(
function() {
    $('.imageholder').fadeIn('slow');
},function() {
    $('.imageholder').fadeOut('slow');
}

); When I hover the .parent div all related parent divs are displaying the image.

How can I make the hover state to work just for the actual hovered parent element? Thanks!

Answer 1

function () {
    $(this).find(".imageholder").fadeIn("slow");
}

You can use this in the .hover callback to refer to the hovered (parent) element.

Answer 2

$('.parent').hover(function () {
    $(this).find(".imageholder").fadeIn("slow");
});

Answer 3

Try this fiddle you can use .find() method for to point div.

Just like

$(document).ready(function()
                  {
                      $('.parent').hover(function() {
                    $(this).find('.imageholder').fadeIn('slow');
              },function() {
                   $(this).find('.imageholder').fadeOut('slow');
              })
                  });