How to change the background color on hover using jQuery

http://stackoverflow.com/q/11068763/154877

HTML

<div id="wrap">
  <header>
    <h1>How to change the background color on hover using jQuery</h1>
    <div id="nav">
      <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </header>
  <section>
  </section>  
  <footer>This is a code example for the Stack Overflow question
    <br><a href="http://stackoverflow.com/q/11068763/154877" target="so">"How to change the background color on hover using jQuery"</a></footer>
</div>

CSS

* { box-sizing:border-box; }
body { color:#222; padding:1em 2em; background:#eee; font:13px/1.4 'open sans', sans-serif; }
h1, h2 { margin:0 0 .5em; line-height:1.2; font-family:'open sans condensed', sans-serif; }
h1 { color:#f90; text-transform:uppercase; } p { margin:1em 0; }
a { color:#06c; -webkit-transition:.2s linear; transition:.2s linear; } a:hover { color:#07c; }
footer { color:#888; clear:both; font-size:12px; margin:2em 0 0; text-align:center; } footer a { color:#444; }
#wrap { margin:1em auto; padding:1.5em; background:#fff; box-shadow:0 5px 5px 0 rgba(0,0,0,.2); }

#nav { background:#333; }
  #nav ul { padding:0; overflow:hidden; list-style:none; }
  #nav li { float:left; }
  #nav a { color:#fff; display:block; padding:.5em 2em; }
    #nav a:hover { background:#666; }
    #nav a.active { color:#222; background:#f90; }
      #nav a.active:hover {}
      #nav.over a.active { color:#fff; background:#c33; }
        #nav.over a.active:hover { background:#666; }

JavaScript

(function($){

  $nav = $("#nav");
  $nav.on("mouseenter", "a",function(){
    $nav.toggleClass("over");
  }).on("mouseleave", "a",function(){
    $nav.toggleClass("over");
  });

})(jQuery);