Background not changing to red

http://removed.com/jquery/# First time playing with jQuery, and kind of stuck already. I'm expecting the background to change to red on hover, but it's not for some reason. Can anyone 开发者_JAVA百科give me a hand? Thanks!

Try moving the jQuery code for div.sidenavOff inside the ready defintion, like so

<script type="text/javascript">
    $(document).ready(function(){
        $("a").click(function(event){
            alert("Thanks for visiting!");
        });
        $("div.sidenavOff").mouseover(function(){
            $(this).removeClass().addClass("sidenavOver");
        }).mouseout(function(){
            $(this).removeClass().addClass("sidenavOff");       
        });
    });

</script>

You need to place the calls to .mouseover and .mouseout in your $(document).ready(function() {... block. As you have it, when the selector $("div.sidenavOff") is called, those elements don't exist yet, and no handlers are attached. Moving them into document.ready will call them after the elements have been loaded.

you could also do smth like

$(document).ready(function(){
  $("div.sidenavOff").mouseover(
    function(){
      $(this).toggleClass("sidenavOver").toggleClass("sidenavOff",true);
    }
   )
 }
)

it has the same functionality as Jonathan's example, but it's less code to write:)