Why is css is adding a duplicate border to my element when hovered?

user_14886175 0
Viewed 206

Expected result: the active link has a black bottom border. when hovering over links (not including the active page) the bottom bar is shown with a different color.

Actual result: the black bottom border appears under the active page link, but when hovering over the link it remains and a second, colored bottom border appears.

I was using similar code to control background color and it worked fine. But when I switched to trying to use bottom-border, I got an unexpected result -

Two bottom borders appear, one black and one colored.

ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent
}

ul.topnav li a:hover:not(.active) {
    border-bottom: 2px solid #61a5c2;
}

ul.topnav li.active {
    border-bottom: 2px solid black
}
<header>
  <nav>
    <ul class="topnav">
      <li class="active"><a href="#">Home</a></li>
      <li class=""><a href="#">Diagnosis</a></li>
      <li class=""><a href="#">Data Visualization</a></li>
      <li class="right"><a href="#">About</a></li>
    </ul>
  </nav>
</header>

css html
3 Answers

You can just change your css to below. "active" class is on li so this check will make sure if the black border is there then do not put border on hover. so :not(.active) will be on li

ul.topnav li:not(.active) a:hover {
    border-bottom: 2px solid #61a5c2;
}


ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent
}

ul.topnav li:not(.active) a:hover {
    border-bottom: 2px solid #61a5c2;
}

ul.topnav li.active {
    border-bottom: 2px solid black
}
<header>
  <nav>
<ul class="topnav">
  <li class="active"><a href="#">Home</a></li>
  <li class=""><a href="#">Diagnosis</a></li>
  <li class=""><a href="#">Data Visualization</a></li>
  <li class="right"><a href="#">About</a></li>
</ul>
  </nav>
</header>

user_23259870

So, if I got you right, you want all your li > as have a colored bottom border when hovered except your active a which should keep it's black bottom border; you're problem was in declaring your selector for your active li, you need to hit ul.topnav li.active a{ border-bottom: 2px solid black; }, which indicates to the a of the active li not the li itself, and also you should change ul.topnav li:not(.active) a:hover to ul .topnav li a:hover {border-bottom: 2px solid #61a5c2;}.

user_146686290

Consider this: A link is active, so the list item is given a bottom border because of this code:

ul.topnav li.active {
    border-bottom: 2px solid black
}

Now lets hover on the anchor tag of this active link. You are not adding any "active" class to the anchor tag. so on hover the following code is applied always for all anchor tags:

ul.topnav li a:hover:not(.active) {
    border-bottom: 2px solid #61a5c2;
}

so you end up seeing both borders. Change the selector for hover styles to make this work.

user_127479500
Related