Question

Kindly check the following code. Its an auto generated code. I wish to apply fadeIn() effect to “thumb-info” class only.

<div class="work-thumbs">
<article>
<div class="thumb"><img src="1.jpg" /></div>
<div class="thumb-info">Link #1 - Heading #1</div>
</article>

<article>
<div class="thumb"><img src="2.jpg" /></div>
<div class="thumb-info">Link #2 - Heading #2</div>
</article>
</div><!--/.work-thumbs-->

I have written the jQuery code as follows but it applies to all the elements in the list.

$('.thumb').mouseenter(function(){
$('thumb-class').fadeIn('slow');
});

I want it to apply only to the element on which the cursor is hovering at the moment.

Thank you for your time.

EDIT: Thanks for your answers, but the “thumb-info” is a hidden element and on “.thumb” hover only it will appear,so I cant use thumb-info class with “this” function. If that’s what you are suggesting.

Answer 1

Because your are selecting all the elements with class of thumb-info, you can use the next() or siblings() methods, try this:

$('.thumb').hover(function(){
     $(this).next().fadeIn('slow');
     // or $(this).siblings('.thumb-info').fadeIn('slow');
},function(){
     $(this).next().fadeOut('slow');
     // or $(this).siblings('.thumb-info').fadeOut('slow');
});

Fiddle

1. next()
2. hover()
3. siblings()