CODEWITHSUNDEEP
htmlcsscolors
Shafizadeh
Shafizadeh

Reputation: 10380

Don't change <a> color on hover if there is active class

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?

Upvotes: 3

Views: 3299

Answers (2)

Dejan Munjiza
Dejan Munjiza

Reputation: 798

You can use: .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>

Upvotes: 5

Hp93
Hp93

Reputation: 1535

There are two ways:

First is simply add a hover rule for .active indicates red color:

.active:hover {
    color: red;
}

The second way is to exclude .active when hover using :not selector:

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>

Upvotes: 2

Related Questions