acknolodgia acknolodgia - 5 months ago 34
CSS Question

How to disable hover effect for active link?

Hi I'm having a hard time finding out how to disable the hover effect in my active link. Every time I hover it to the active link it also changes the color, so I want to disable it.



.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

Try this:

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

Or:

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