javascript - jQuery .hover 只在我的导航栏中的第一个 li 上工作？

Question

在下面的代码中，我在悬停时使用 id="nav-button"创建 console.log，以便我可以检查其是否正常工作。

    <ul>                        <!-- Main Navigation -->
      <li ><a id="nav-button" href="welcome/about">ABOUT</a></li>
      <li ><a id="nav-button" href="search-listings">SEARCH LISTINGS</a></li>
      <li ><a id="nav-button" href="featured">FEATURED</a></li>
      <li ><a id="nav-button" href="sell-your-home">SELL YOUR HOME</a></li>
      <li ><a id="nav-button" href="welcome/press">PRESS</a></li>
      <li ><a id="nav-button" href="welcome/contact">CONTACT</a></li>
    </ul>

我的 JavaScript 看起来像这样:

$( document ).ready(function() {
    $("#nav-button").hover(
        function(){
            console.log('done');
        });
});

出于某种原因，只有我的第一个链接响应悬停。其他人什么也不做。

Answer 1

不能有超过 1 个具有相同 ID 的项目，如果这样做，它们就不是很唯一。将 HTML 更改为:

<ul>                        <!-- Main Navigation -->
  <li ><a class="nav-button" href="welcome/about">ABOUT</a></li>
  <li ><a class="nav-button" href="search-listings">SEARCH LISTINGS</a></li>
  <li ><a class="nav-button" href="featured">FEATURED</a></li>
  <li ><a class="nav-button" href="sell-your-home">SELL YOUR HOME</a></li>
  <li ><a class="nav-button" href="welcome/press">PRESS</a></li>
  <li ><a class="nav-button" href="welcome/contact">CONTACT</a></li>
</ul>

还有 JS:

$( document ).ready(function() {
    $(".nav-button").hover(
        function(){
            console.log('done');
        });
});

这是一个演示它的 fiddle :http://jsfiddle.net/UqyHD/