Jquery：悬停时透明覆盖

Question

基本上我有4个图像，div设置如下：

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

和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;}

我怎样才能得到我的Jquery，以便它在每个单独的图像悬停时在覆盖层中淡入淡出，我总是对这个想法感到困惑，因为div类都是一样的，不会同时触发吗？

到目前为止的 jquery 如下：

$('.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

在幕后，jQuery 迭代与选择器匹配的每个 div，并将 over 和 out 函数绑定到每个单独的元素。

顺便说一句，我建议同时调用 stop可选参数，clearQueue（在功能之间切换时删除任何待处理的动画）和 gotoEnd（完成当前动画）设置为 true - 这通常是人们想要的行为！ （例如，请参阅此问题。）

Answer 2

我得到了答案，我从来没有意识到 Jquery 足够聪明，只能将操作分别应用于具有相同类的触发器的单独元素！完美：

无论如何都是jquery！

    $('.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);
});