不要更改<a> color on hover if there is active class

Question

Here is my HTML and CSS codes:

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>

I want to keep current color remain constant (always red, even for hover) where there is active class. How can I do that?

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

有两种方法：

首先，只需添加.active的悬停规则即表示红色：

.active:hover {
    color: red;
}

第二种方法是在使用.active选择器悬停时排除:not：

a:not(.active):hover {
    color: #000;
}

l {
  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:not(.active):hover {
    color: #000;
}
.active {
  color: red;
}

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