How to trigger a:hover with jQuery

[X96 Web Design]

I've now decided it's about time I learned how to use jQuery...

I want to know how to trigger an A:HOVER function for a menu. I have the latest jQuery downloaded (1.3.2).

I know that I have to edit the section highlighted below, but what do I put into it?

  <script type="text/javascript">
  $(document).ready(function(){
    
    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

  });
  </script>

My menu is this:

<div class="menu">
	<ul class="nav">
		<li><a href="/">Web</a></li>
		<li><a href="images/">Images</a></li>
		<li><a href="maps/">Maps</a></li>
		<li><a href="news/">News</a></li>
		<li><a href="video/">Video</a></li>
		<li><a href="gmail/">Gmail</a></li>
	</ul>
</div>

Yes, I'm trying to recreate Google...

Any help or tips would be appreciated.

// X96 \\

[Nile]

It's just like a css selector, try .menu .nav li a or .menu .nav li. I don't know which your trying to get to (listed both ways I would think you are).

[Snookerman]

I want to know how to trigger an A:HOVER function for a menu.

Try this:

<script type="text/javascript">
$(function(){
    $('.nav a').hover(function(){
        $(this).css({'color':'red','background':'#ddd'});
    },function(){
        $(this).css({'color':'blue','background':'#fff'});
    });
});
</script>

I would recommend these nice tutorials: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Good luck!