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

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>

Answer 1

试试这个：

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

或者：

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

Answer 2

你可以简单地将所有的字体和颜色到非徘徊版本。或者，您可以通过输入以下内容一次覆盖所有这些信息。

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

Answer 3

添加:hover和:focus风格的活动链接：

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

https://jsfiddle.net/ejdr911c/