jquery - 如何使用 jQuery 为菜单添加悬停效果

Question

我在 this 上有顶级菜单页面，以列表形式实现(UL 的 ID 为“top-nav”)。

我一直在研究它并试图弄清楚如何在用户将鼠标悬停在它上面时使用 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>

下面是处理列表和 anchor 标签悬停的 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 是悬停元素的 id，element_id 是您要淡入/淡出的元素的 id。

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

更多信息:

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