如何將懸停效果添加到使用jQuery的菜單

我已獲得this頁面的頂級菜單，實現爲列表（帶有ID「top-nav」的UL）。如何將懸停效果添加到使用jQuery的菜單

我一直在與它搏鬥，並試圖找出如何添加使用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; 
}

謝謝。

來源

2010-08-12 Alex

嘗試：

$('#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/

來源

2010-08-12 14:49:49 Sarfraz

謝謝，Sarfraz。「#element_id」是錨標籤嗎？ – Alex 2010-08-12 14:52:01

@Alex：請在下面的代碼請參閱我的描述。 – Sarfraz 2010-08-12 14:52:48

愚蠢的後續問題：如果我只是在懸停期間通過CSS更改元素上的背景圖像，這是否仍然有效？ – Alex 2010-08-12 15:01:11

如何將懸停效果添加到使用jQuery的菜單

回答

相關問題