Javascript 如何从.box>；更改（此）的焦点。覆盖（子） .盒子{ 高度：200px；宽度：200px； } .覆盖{ 高度：50px；宽度：200px；位置：absolite；顶部：-50px； } $（“.box”）.mouseover（函数（）{ //$（“.overlay”）.animate({ //$（此）。设置动画（{ 顶部：“+=50px”， }); });

假设我有大约5个.box div，每个div都有从box1->box5等开始的递增id。 覆盖应该在鼠标悬停时滑入，但仅在悬停框上。我不知道用于此的jquery函数。运行animate on（“.overlay”）在每个框上显示覆盖，使用（this）不起作用，因为它显然是指（“.box”）

---

如何将（此）重点放在覆盖上？

您可以使用jQuery的

find

方法：

   <div class="box" id="box1">
    <div class="overlay" id="ovlay1">
    </div>
</div>
<style>
.box{
    height:200px; width:200px; 
}
.overlay{
    height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
    // $(".overlay").animate({
    // $(this).animate({    
        top: "+=50px",
    });
});
</script>

---

将当前悬停的

.box中的
.overlay
作为目标

$(".box").mouseover(function(){
     $(this).find(".overlay").animate({  
        top: "+=50px",
    });
});

此jQuery将选择作为$子项的覆盖（此项）：

最后一块看起来像这样：

$(this).children('.overlay').animate({
    top:"+=50px"
});

$(this).children('.overlay').animate({
    top:"+=50px"
});

$(".box").mouseover(function(){
    $(this).children('.overlay').animate({
        top:"+=50px"
    });
});