javascript - 如何强制悬停选择器不出现在特定的 div 上

Question

如何将列表中的第一个元素排除在 :hover 选择器的目标之外？

CSS:

.navbar .navbar-nav > li :hover { 
  color:red !important;
}

HTML:

<li>
@Html.ActionLink("Login", "Login", "Home", new { area = "" }, new 
{@class ="navbar-item" })
</li>

到目前为止我尝试了什么:

document.getElementsByClassName("navbar-item")[0].onmouseover = function () {
  mouseOver()
};

function mouseOver() {
  document.getElementsByClassName("navbar-item")[0].style.color="blue !important"
}

Answer 1

您不需要为此使用 JavaScript/jQuery。只需像这样使用 :nth-child css 选择器:

/* target all hovered li elements except the first one */
.navbar .navbar-nav > li:nth-child(n+2) a:hover { 
  color: red;
} 

<nav class="navbar">
  <ul class="navbar-nav">
    <li>
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li>
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li>
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

---

或者，如果您不使用默认的 Bootstrap anchor 链接，而只想定位 li 元素本身，只需链接 :nth-child 选择器和 :hover 像这样的选择器:

/* target all hovered li elements except the first one */
.navbar .navbar-nav > li:nth-child(n+2):hover { 
  color: red;
}

<nav class="navbar">
  <ul class="navbar-nav">
    <li>
      Link 1
    </li>
    <li>
      Link 2
    </li>
    <li>
      Link 3
    </li>
  </ul>
</nav>