Disable hover on active link

Question

I am trying to figure out how to not override the active link with the hover.

<style>
.primary-nav-wrapper nav a:active, .primary-nav-wrapper nav .active>a  {
    border-bottom: 3px solid #4F579D;}
.primary-nav-wrapper nav a:hover:not([active]) {border-bottom: 3px solid #DFE1E5;}
</style>

Answer 1

I don't have your code, so I can't help you to the fullest, but I will try.

I think your CSS has a fundamental problem. I think you want this:

• On hover, give the a a grey border.
• If active, give the a a blue border.
• If somebody hovers and activates the a, it should still be blue.

If that is your problem, here is a working code:

.primary-nav-wrapper nav a:hover  {
    border-bottom: 3px solid #DFE1E5;
}
    
.primary-nav-wrapper nav a:hover:active {
  border-bottom: 3px solid #4F579D;
}

<div class="primary-nav-wrapper">
  <nav class="active">
    <a>test</a>
  </nav>
  <nav class="active">
    <a>test</a>
  </nav>
  <nav class="active">
    <a>test</a>
  </nav>
</div>