PDA

View Full Version : How to trigger a:hover with jQuery



X96 Web Design
04-27-2009, 11:44 PM
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
04-28-2009, 02:55 AM
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
04-28-2009, 07:05 AM
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/ (http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/)

Good luck!