javascript - how to change focus of (this) from .box > .overlay (child) -

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

assuming have 5 of .box divs, each ascending id box1 -> box5 etc. overlay should slide in on mouseover, on hovered box.. can't figure out jquery function this. runing animate on (".overlay") shows overlay on every box, using (this) not work because referring (".box")...

how can focus (this) on overlay?

you can use find method of jquery:

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