Question

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

<script>
 $(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)

Answer 1

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