javascript - 如何从 .box > .overlay (child) 改变 (this) 的焦点

Question

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

假设我有大约 5 个 .box div，每个都有来自 box1 -> box5 等的升序 id。覆盖应该在鼠标悬停时滑入，但只是在悬停的框上..我无法弄清楚这个jquery函数。在 (".overlay") 上运行 animate 会在每个框上显示叠加层，使用 (this) 不起作用，因为它显然指的是 (".box")...

我怎样才能将(这个)聚焦在叠加层上？

Answer 1

您可以使用 jQuery 的 find 方法:

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