如何强制悬停选择器不会出现在特定的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锚点链接，只想定位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>

Answer 2

你也可以使用not()。

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

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