Javascript 只在导航栏中的第一个li上悬停？

在下面的代码中，我使用悬停上的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>

---

出于某种原因，只有我的第一个链接响应悬停。其他项不做任何操作。

不能有多个具有相同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>

这里有一把小提琴来演示它：

Html:

<ul>                       
  <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>

---

当您按ID查找元素时，它将解析DOM，直到找到具有该ID的第一个元素。

$（“a.nav-button”）

将选择具有该类的所有元素

ID应该是唯一的，因此您不能让ID=“导航按钮”出现多次。您可以做的是将id分配给ul标签，如下所示

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

---

ID在文档中必须是唯一的，您应该使用类。第一个链接是您选择的唯一链接。如果你改为全部选中，它们都会有悬停事件。这个问题似乎离题了，因为它是关于一个ID不能多次使用的非常普遍的规则？该死的，我一直都明白…我将删除这个问题对不起！

<ul>                       
  <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>

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

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

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