jquery - Multiple similar elements, apply effects to single element at a time

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

Use jQuery .hover() and pass in $this.

$('.thumb-info').hover(function() {
  $(this).dosomething //
});

By using this in your function handler, you are only effecting the element being hovered.

Answer 2

Use $(this) so that it doesn't apply it to all elements with that class.

$(".thumb").hover(function(){
    $(this).next().fadeIn();
},function(){
    $(this).next().fadeOut();
});

Answer 3

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()