如何禁用活动链接的悬停效果？

Question

你好，我遇到了一个问题，就是不知道如何禁用活动链接中的悬停效果。每次把鼠标放到活动链接上面时，链接颜色也会发生变化，所以我想禁用这个效果。

.navibar {
  height: 26px;
  width: 100%;
  display: inline-block;
  background: #F7FDFD;
  font-family: Arial;
  font-size: 1.1em;
  font-weight: 200;
  border-bottom: 1px solid #A2BFF3;
  margin-top: 10px;
}
.navibar ul {
  text-align: center;
  padding-top: 3px;
  overflow: hidden;
}
.navibar li {
  float: right;
  display: inline-block;
  width: 90px;
  text-transform: lowercase;
  font-family: Arial;
  font-size: 1.0em;
  font-weight: 200;
}
.navibar li:hover {
  background: #A2BFF3;
  color: #FFFFFF;
  border-radius: 2px;
}
.navibar li.active {
  background: #ffffff;
  color: #000000;
  border: 1px solid #a2bff3;
  border-top: 3px solid #04afba;
  border-bottom: 1px solid transparent;
  margin-top: -2px;
}
.navibar a {
  display: block;
  color: #b3b3b3;
}
.navibar a:hover {
  display: block;
  color: #000000;
}

<div class="navibar">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">More</a></li>
  </ul>
</div>

- acknolodgia

Answer 1

只需使用：

.navibar a:hover:not(.active) { 
   display: block; 
   color: #000000;
} 

不是：

.navibar a:hover { 
   display: block; 
   color: #000000;
}

- Chimdi

Answer 2

试试这个：

.navibar li.active a:hover {
  color: #b3b3b3; /*the default color*/
}

或者：

.navibar li.active a {
  color: #000; /*the color you want*/
}

- Stickers

Answer 3

添加活动链接的:hover和:focus样式：

.navibar li.active:hover,
.navibar li.active:focus{
  color: #b3b3b3;
}

https://jsfiddle.net/ejdr911c/

- Huy Nguyen

Answer 4

您可以将所有字体和颜色设置为非悬停版本。或者您可以通过输入以下内容一次性覆盖所有内容。

a:link, a:visited, a:hover, a:active {
    color: #ffffff;
}

- Jonathon Garratt