Question

Currently I have something like this:

$('.item').hover(function() {
  $('.babyitem').fadeToggle('slow', function() {});
});

It works in the sense that when an item is hovered, all of the babyitems fade in. However, I just want the specific child .babyitem to fade in.

I have tried this, but nothing happens:

$('.item').hover(function() {
  $(this).children('.babyitem').fadeToggle('slow', function() {});
});

Also the HTML is like this:

<div class="item">
   <div class="babyitem">
   </div>
</div>

Answer 1

Is .babyitem a direct child of .item ? If it is not, you should consider using .find() instead of .children() :

$('.item').hover(function() {
  $(this).find('.babyitem').fadeToggle('slow', function() {});
});