Why is this mouseover jquery code not working?

I'm using the following code in the head area of the site (I've also tried the body):

<sc开发者_如何学Pythonript>
 $(document).ready(function() {
  $(function(){
    $("#h1").mouseover(function () {
    $("#h1").css("color","red");
  });
  });
  });
</script>

I'm also using this as the div (button):

<div class="button" id="h1"><strong>Home</strong></div>

Why isn't the font changing to red when I mouse over it? (Original color is white fyi)

At the time the inline script code runs, jQuery hasn't found any results to bind the mouseover to.

You need to wrap your inline script in a document.ready call like this:

$(document).ready(function() {
    $("#h1").mouseover(function () {
       $("#h1").css("color","red");
    });
});

Ready about jQuery's ready function

You need to wrap that inside of document.ready. The issue is that you are attempting to attach a handler to an element prior to it being created.

You should read the doc for ready to get a better understanding:

http://api.jquery.com/ready/