Navigation Rollovers avec CSS et appliquer jQuery

Question

Je voudrais savoir comment je créer des rollovers pour ma barre de navigation, et également appliquer une certaine JQuery pour définir l'opacité 0 à 100 une fois que la navigation a été plané si cela est possible.

Ma navigation en position stationnaire. La lueur dans les lettres.

HTML: (ignorer les divs vides)

<nav> 
    <ul> 
     <div class="ref1"><!-- empty div for reflections --></div> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Client Login</a></li> 
     <li><a href="#">Support</a></li> 
     <li><a href="#">Contact</a></li> 
     <div class="ref2"><!-- empty div for reflections --></div> 
    </ul> 
    </nav> 

CSS:

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; width: 638px; } 
nav ul { padding: 18px 0; } 
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 32px; margin: 0 auto; } 
nav ul li:first-of-type { background: none; } 
nav ul li:last-of-type { background: url(../images/ref2.png) no-repeat right bottom; margin: 10px 0 0 0; } 
nav ul li a { color: #626262; font: 16px Arial, Helvetica, serif; } 
nav ul li a:hover { color: #dfdfdf; } 

Answer 1

ce que vous devez faire est de configurer vos images survolées. Un pour l'état normal "non planifié" et un pour "plané" et appliquer des classes pertinentes à vos liens de navigation.

... 
<li><a href="#" class="home">Home</a></li> 
<li><a href="#" class="about">About Us</a></li> 
... 

Ensuite, vous pouvez utiliser CSS pour afficher l'image comme une image d'arrière-plan lorsque l'élément est plané:

<li><a href="#" class="home">Home</a></li> 

nav ul li.home:hover { 
background: url(../images/home-hover.jpg); 
display: block; /* apply this to give the element the dimensions of your image*/ 
width: 69px; /*width of your nav image*/ 
height: 25px; /*height of your nav image*/ 
} 

Ceci est juste un exemple rapide pour vous aider à démarrer, mais vous avez besoin de le mettre pour chaque élément.

En outre, vous pouvez consulter CSS Sprites