Question

I’m having some difficulty wrapping my head around this one. I have two divs, one overlays the other exactly. For example sake, lets say the blue div is on the bottom and the red div is on top with it’s display property set to none, i’ll call this a group. There are also 5 of these ‘groups’ in a row.

I would like to be able to hover over one, and have the hidden red dive fade in. Currently my code below fires all 5 at the same time, because they all have the same class.

What can I use to solve this problem? I’ve tried using ‘this’ inside the hover event and I can’t seem to get anywhere.

$('.blue').mouseenter( function (){
    $(".red-rollover").fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover").fadeOut("500");
});

edit
Sorry I didn’t post a fiddle… my bad. This explains the div layout a bit better.
http://jsfiddle.net/pjPua/

Answer 1

Personally I would nest the red-rollover divs inside the blue and then use .children() of this to activate them like so:

e.g: http://jsfiddle.net/K68F5/

your fiddle, updated with the fix: http://jsfiddle.net/pjPua/1/

$('.blue').mouseenter( function (){
    $(this).children('.red').fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(this).children('.red').fadeOut("500");
});​