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

试试这个：

Environment： iOS 7.0， Xcode 7.3.1， autolayout ＝ use "masonry"

或者：

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

Answer 2

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

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

Answer 3

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

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

https://jsfiddle.net/ejdr911c/

Answer 4

您可以简单地将所有字体和颜色设置为非悬停版本。或者您可以通过键入以下内容立即覆盖所有这些内容。

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

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

4 个答案: