CODEWITHSUNDEEP
jqueryhtml
Иван Божков
Иван Божков

Reputation: 264

jquery animate divs in grid

I have a grid of divs that looks like a table.

#wrapper
 > div.container > h2 (hidden)
 > div.container > h2 (hidden)
 > div.container > h2 (hidden)
</>

I want to animate the background color of the hovered div and display the h2 in it.

my code looks like this.

$('.container').hover(function() {
    $('.container>h2').stop().fadeOut(200);
    $(this).stop().animate({ backgroundColor: '#3e95ff' }, 300);
},function() {
    $('.container>h2').stop().fadeIn(200);
    $(this).stop().animate({ backgroundColor: 'white' }, 300);
});

Problem is when I hover a div all of the h2's are shown. How can I select only the h2 of the hovered div?

Upvotes: 0

Views: 120

Answers (1)

slash197
slash197

Reputation: 9034

Try changing this

$('.container>h2').stop().fadeIn(200);

with

$(this).find('h2').stop().fadeIn(200);

Upvotes: 1

Related Questions