Jquery: Transparent overlays on hover

Question

Hi guys, basically I have 4 images with divs set up like this:

   <div id="selector">
    <div id="1"><div class="folio_container pk"><div class="overlay"></div></div></div>
    <div id="2"><div class="folio_container ybn"><div class="overlay"></div></div></div>
    <div id="3"><div class="folio_container u"><div class="overlay"></div></div></div>
    <div id="4"><div class="folio_container more"><div class="overlay"></div></div></div>
    <div class="clearfloat"></div>
    </div>

And the css:

  .folio_container{margin:10px 80px 10px 15px; float:left; position:relative; cursor:pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-position:top left; background-repeat:no-repeat; width:80px; height: 80px;}
.pk{ background-image:url(../images/pk_icon.png) !important;}
.ybn{ background-image:url(../images/ybn_icon.png) !important;}
.u{ background-image:url(../images/u_icon.png) !important;}
.more{ background-image:url(../images/more_icon.png); margin:10px 0px 10px 15px !important;}

.overlay{ background-image:url(../images/overlay.png); background-position:top left; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-repeat:no-repeat; width:80px; height:80px; position:absolute; top:0px; left:0px; display:none;}

How can I get my Jquery so that it fades in the overlay on hover of each separate one, I've always got confused with this idea seeing as the div classes are the same, will it not trigger them all at the same time?

Heres the jquery thus far:

$('.overlay').css('display', 'block');
$('.overlay').css('opacity', 0.0);
$('folio_container', this).hover(function() {
 $(this).children('.overlay', this).stop().animate({opacity:1.0},500);
},
function() {
 $(this).children('.overlay', this).stop().animate({opacity:0.0},500);
});

Answer 1

I got the answer, I never realised Jquery was clever enough to only apply an action onto the separate elements respectively of the trigger with the same classes! Perfect:

heres the jquery either way!

    $('.overlay').css('display', 'block');
$('.overlay').css('opacity', 0.0);
$('.folio_container').hover(function() {
 $('.overlay', this).stop().animate({opacity:1.0},500);
},
function() {
 $('.overlay', this).stop().animate({opacity:0.0},500);
});

Answer 2

Behind the scenes, jQuery iterates each of the divs matched by your selector and binds the over and out functions to each individual element.

As an aside, I recommend calling stop with both of the optional parameters, clearQueue (to remove any pending animations when you switch between functions) and gotoEnd (to finish the current animation) set to true - this is usually the behavior people want! (See for example, this question.)