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

我在页面的顶部有一个菜单，作为一个列表实现（UL，ID为“top nav”）

我一直在努力解决这个问题，试图弄清楚当用户将鼠标悬停在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>

谢谢。

试试：

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

其中，

top nav

是悬停元素的id，

element_id

是要淡入/淡出的元素的id

基本上，

hover

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

更多信息：

试试：

其中，

top nav

是悬停元素的id，

element_id

是要淡入/淡出的元素的id

基本上，

hover

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

更多信息：

---

谢谢你，萨弗雷斯。“#element_id”是锚定标记吗？愚蠢的后续问题：如果我只是在悬停期间通过CSS更改元素上的背景图像，这仍然有效吗？@Alex:CSS

：hover

psedou选择器与此无关，它们是不同的东西，你可能想尝试一下。我已经解释了jquery hover的工作原理，您可能想试试：）谢谢，Sarfraz。我将使用jQuery悬停并查看文档。这就是我要用的效果谢谢Sarfraz。“#element_id”是锚定标记吗？愚蠢的后续问题：如果我只是在悬停期间通过CSS更改元素上的背景图像，这仍然有效吗？@Alex:CSS

：hover

psedou选择器与此无关，它们是不同的东西，你可能想尝试一下。我已经解释了jquery hover的工作原理，您可能想试试：）谢谢，Sarfraz。我将使用jQuery悬停并查看文档。这就是我需要使用的效果。

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