How to change the background color on hover using jQuery
<pre><code>&lt;div&gt;
  &lt;div id="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a class="active" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function () {
      $("#nav li a").hover(  
        function () { $(this).parent('ul').parent('li').find('a.active').css('background-color', 'Red'); }
      );
    });
  &lt;/script&gt;
&lt;/div&gt;
</code></pre>

<p>I am simply trying to change the background-colour of the menu item with a class name 'active'   when the user hovers over any other item.</p>
