html - 事件按钮不应在悬停时改变颜色

Question

我分别设置了悬停和激活功能，当我悬停在导航菜单上时颜色会改变

/* Change the color of links on hover */
nav .nav > li > a:hover {
  background-color: peachpuff;
  color: black;
}

/* Add a color to the active/current link */
.active {
  background-color: darkslategray;
  color: snow;
}

<nav>
  <ul class="nav navbar-nav menu">
    <li class="active"><a href="#Fashion">Fashion</a></li>
    <li><a href="#StyleHunter">StyleHunter</a></li>
    <li><a href="#Lifestyle">Lifestyle</a></li>
    <li><a href="#Celebrity">Celebrity</a></li>
    <li><a href="#Videos">Videos</a></li>
    <li><a href="#Interviews">Interviews</a></li>
  </ul>
</nav>

bar 并且颜色也随着设置为事件的菜单而改变。但是当我将鼠标悬停在事件按钮上时，它的颜色再次从事件变为悬停。我该如何阻止它？

Answer 1

尝试:

.nav>li:not(.active)>a:hover {
  background-color: peachpuff;
  color: black;
}