как заставить зависание селектора не появляться на определенном 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

Вы также можете использовать 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>

Answer 2

Вам не нужно использовать 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>

---

Или, если вы не используете ссылки привязки по умолчанию при начальной загрузке и просто хотите нацелиться на сам элемент 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>