jQuery is firing all elements of same class, how can I fire just the one hovered?
===

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");
    });