If I add script after the html it works! But if scriot is above the html, it doesnt work!

If I add script after the html it works! But if scriot is above the html, it doesnt work!

Hello;

How come this doesnt work? Only works if I move jquery down!


  1.    <script>
    $(".blue").hover(
      function () {
        $(this).addClass("red");
      },
      function () {
        $(this).removeClass("blue");
      }
    );


    </script>

       <style type="text/css">
       .blue { color:#09C; margin:40px}
       .red { color:red; margin:40px}  
       </style>
       <div class="blue">Blue</div>