jQuery: Fading CSS hover поверх статической кнопки?

Question

Я создаю навигацию и уже создал свойства CSS для кнопок.

Я хотел бы исчезнуть в свойствах зависания поверх свойств статической кнопки.

Что было бы самым эффективным способом сделать это?

СМЧ выглядит следующим образом:

<div id="nav"> 
    <form method="post" action=""> 
     <a>Home</a> 
     <a>Link2</a> 
     <a>Link3</a> 
    </form> 
</div> 

#nav { 
position:absolute; 
margin-top:96px; 
margin-left:30px; 
height: 450px; 
width: 140px; 
font-family:"Book Antiqua";} 

#nav a { 
background:url(Images/Button.png); 
height:28px; 
width:130px; 
font-family:"Book Antiqua"; 
font-size:14px; 
text-align:center; 
color:#C60; 
text-decoration:none; 
background-position:center; 
margin:auto; 
display:block; 
position:relative; 
line-height:190%; 
} 

#nav a:hover { 
background:url(Images/Button%20Hover.png); 
height:34px; 
width:140px; 
font-family:"Book Antiqua"; 
font-size:16px; 
text-align:center; 
color:#C60; 
text-decoration:none; 
margin:-3px; 
z-index:2; 
line-height:210%; 
text-indent:-10px;} 

#nav a:active { 
background:url(Images/Button%20Hover.png); 
height:34px; 
width:140px; 
font-family:"Book Antiqua"; 
font-size:14px; 
text-align:center; 
color:#862902; 
text-decoration:none; 
margin:0 -3px; 
z-index:2;} 

Спасибо.

Answer 1

Используйте transition свойство CSS ...

-webkit-transition:all .3s; 
-moz-transition:all .3s; 
-o-transition:all .3s; 
-ms-transition:all .3s; 

Добавить это в #nav a ...

Это работает с Google Chrome, Mozilla Firefox, Opera и IE последней ...

Answer 2

Если вы хотите сделать это с помощью jQuery, тогда дайте вам навести на себя состояние класса. Например:

#nav a:hover, #nav a.j-hover { .... } 

Теперь используйте функцию toggleClass с hover в JQuery, как это:

$('#nav a').hover(function() { 
     $(this).toggleClass("js-hover", 1000); 
});