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是悬停元素的ID，element_id是您要淡入/淡出的元素的ID。

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

更多信息：

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

如何使用jQuery向菜单添加悬停效果

1 个答案: