CODEWITHSUNDEEP
jqueryhtmlfunctiononmouseover
John Doe
John Doe

Reputation: 3671

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):

<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)

Upvotes: 1

Views: 1997

Answers (2)

James Montagne
James Montagne

Reputation: 78650

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/

Upvotes: 2

mrk
mrk

Reputation: 5117

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

Upvotes: 2

Related Questions