How to get code to stop in hover function when .mole reaches top (0%) and go to game_over()

How to get code to stop in hover function when .mole reaches top (0%) and go to game_over()

<html>

    <head>

        <style>

            body{

                background-color: #facb56;

                height:100%;

                width:100%;

                overflow:hidden;

            }

           

            .mole{

                background-color:rgb(128,64,0);

                border-radius:100px 100px 0px 0px;

                height:100%;

                width:10%;

                position:absolute;

                top:100%;

                background-image: url('mole.png');

                background-size: 100%;

                background-repeat: no-repeat;

            }

            .left_ear{

                background-color:rgb(96,57,19);

                border-radius:50px;
               
                position:absolute;

                left:-15%;

                float:left;

                min-width:30%;

                padding-top:30%;

                z-index:-1;

            }

           .right_ear{

                background-color:rgb(96,57,19);

                border-radius:50px;
               
                position:absolute;

                float:right;

                min-width:30%;

                padding-top:30%;

                left:82%;

                z-index:-1;

            }

           

            #mole1 {left:15%;}

            #mole2 {left:45%;}

            #mole3 {left:75%;}

           

            .score{font-family:arial; font-size:60px; position:absolute; right:30px;}

           

        </style>

        <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

       

        <script>

            jQuery(document).ready(function(){

                var score=0;

               

                function game_over(){

                    jQuery('.mole').animate({'top':'100%'},300);

                    jQuery('.score').html('GAME OVER');

                    jQuery('.score').append('<div class="try_again">TRY AGAIN</div>');

                    jQuery('.try_again').click(function(){start();});

                }

               

                function start(){

                    score=0;

                    jQuery('.score').html('Score: ' + score);

                    jQuery('.mole').animate({'top':'0%'},5000,function(){

                        game_over();});

                }

               

                 jQuery('.mole').hover(function(){

                   
                   

                   
                   
                   jQuery(this).css('background-image','url(hurt.png)');

                    jQuery(this).stop().animate({'top':'100%'},300,function(){

                    score = score + 1;

                    jQuery('.score').html('Score: ' + score);

                    jQuery(this).css('background-image','url(mole.png)');

                    jQuery(this).animate({'top':'0%'},5000);

                   

                     });
                   
                   
       
                    });

                   
     
                    start();

                             

       });


        </script>

    </head>

    <body>

        <div class="score">Score: 0</div>

        <div class="mole" id="mole1"><div class="left_ear"></div><div class="right_ear"></div></div>

        <div class="mole" id="mole2"><div class="left_ear"></div><div class="right_ear"></div></div> 

        <div class="mole" id="mole3"><div class="left_ear"></div><div class="right_ear"></div></div>

    </body>

</html>