оживить дочерний элемент при наведении родительского элемента

Я пытаюсь получить дочерний div для анимации при наведении его родительского контейнера div. Но в настоящее время я могу только заставить весь div двигаться, и все они перемещаются в каждом div. вот мой код. Если кто-то может помочь мне получить только дочерний div родительского div, который завис на анимацию, это было бы здорово.

<div class="parent">
    <div class="child">child</div>
</div>
<div class="parent">
    <div class="child">child</div>
</div>
<div class="parent">
    <div class="child">child</div>
</div>

    <script>
        $(".parent").hover(function() {
            $("this.child").animate({
                top: '-10px'
                }, 500);
            }, 
            function() {
                $(this).stop(true,true).animate({ top: "10px" }, 500);
            });
    </script>
<style>
      .parent {
        width:100px;
        height:100px
        background-color:green;
      }
      .child {
           width:10px;
           height:10px;
           background-color:red;
      }

</style>