如果存在活动类，请勿在悬停时更改 <a> 颜色

Question

这是我的HTML和CSS代码：

ul {
  border: 2px solid;
  padding: 0;
}
li {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
a {
  display: block;
  padding: 15px 0;
  color: gray;
}
a:hover {
  color: #000;
}
.active {
  color: red;
}

<ul>
  <li> <a> one </a> 
  </li>
  <li> <a class="active"> two </a> 
  </li>
  <li> <a> three </a> 
  </li>

我想在有等级的地方保持当前颜色保持不变（始终red，即使是） 。我怎样才能做到这一点？hoveractive

Answer 1

您可以使用：.active:hover { color: red; }。

ul {
  border: 2px solid;
  padding: 0;
}
li {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
a {
  display: block;
  padding: 15px 0;
  color: gray;
}
a:hover {
  color: #000;
}
.active {
  color: red;
}
/* add this part */
.active:hover {
  color: red;
}

<ul>
  <li> <a> one </a> 
  </li>
  <li> <a class="active"> two </a> 
  </li>
  <li> <a> three </a> 
  </li>
</ul>