如何将悬停效果添加到使用jQuery的菜单

Question

我已获得this页面的顶级菜单，实现为列表（带有ID“top-nav”的UL）。

我一直在与它搏斗，并试图找出如何添加使用jQuery的淡入/淡出效果，当用户悬停在它。因此，而不是立即改变背景图像，它会慢慢淡入。

这里的HTML：

<ul id="top-nav" class="flatList"> 
    <li> 
     <a href="#"> 
     <span class="embed embed-top-nav">Home</span> 
     <p>site home, news, highlights</p> 
     </a> 
    </li> 
    <li><a href="#" class="embed embed-top-nav" >Watch UNC-TV</a></li> 
    <li><a href="#" class="embed embed-top-nav">Learn</a></li> 
    <li><a href="#" class="embed embed-top-nav">Support Us</a></li> 
    <li><a href="#" class="embed embed-top-nav" id="nav-last">Contact</a></li> 
</ul> 

及这里的，现在处理的名单和锚标签悬停的CSS：

ul#top-nav { 
    top:71px; 
    margin-left:196px; 
    position:absolute; 
    width:659px; 
    min-width:650px; 
} 
ul#top-nav li, ul#top-nav li a{ 
    width:131px; 
    height:50px; 
    float:left; 
    border: 0px solid white; 
} 
ul#top-nav li a:link, ul#top-nav li a:visited { 
    text-decoration:none; 
    color: #2C6286; 
    background: transparent url(../img/nav-button.png) no-repeat 0 11px; 
    border: 0px solid green; 
    padding-top:9px; 
    padding-left:14px; 
    padding-top:9px; 
    z-index:100000; 
} 
ul#top-nav li a:hover { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px; 
} 
ul#top-nav li .embed-top-nav { 
    font-size:25px  
} 
ul#top-nav li p { 
    position:absolute; 
    top:37px; 
    width:109px; 
    font-size:8px;  
    color:#666; 
    cursor:pointer; 
} 
a:link#nav-last, a:visited#nav-last { 
    background: transparent !important; 
} 
a:hover#nav-last { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px !important; 
} 

谢谢。

Answer 1

尝试：

$('#top-nav').hover(function(){ 
    $('#element_id').fadeIn('slow'); 
}, function(){ 
    $('#element_id').fadeOut('slow'); 
}); 

哪里top-nav是悬停和element_id是要淡入/淡出元素的ID的元素的ID。

基本上hover方法需要两个函数;第一个在鼠标进入元素时执行，而第二个在鼠标离开时执行。

更多信息：

• http://api.jquery.com/hover/