How to disable hover effect for active link?

Question

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 1

Simply use:

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

Instead of:

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

Answer 2

Try this:

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

Or:

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