CSS Bootstrap stop hover border on active item

Question

How do I stop a border being applied twice... once for the active item and once on the hover?

I've tried using .navbar a:not(.active):hover but it doesn't work. I've also tried giving all navbar items a bottom border that is of the required thickness but of the background colour and changing the colour on the hover.

The desired effect is that the active item is in bold and has a white bottom-border, whilst the item the mouse is over also has a white bottom-border (shown in red in the image) but isn't in bold (as both colours will be white I'm not bothered about which one 'wins'). But my problem is when the mouse is over the active item the bottom-border is added twice.

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example. An image of CSS is not code.... — Paulie_D
An element cannot have two borders so there are obviously two elements here....probably an li and an anchor a...Decide which gets the border and adjust your CSS accordingly. — Paulie_D
@Paulie_D: I understand an element can not have two borders, I have a li containing an Html.ActionLink would the later count as an anchor a? — B_D

fbid fbid · Accepted Answer · 2015-12-30T10:43:13

It's most likely due to a border being applied to 2 different elements.

I made you a fiddle to understand the issue.

As you can see all is working correctly because both the .active class and the :hover pseudo class are referred to the ul > li.

ul > li.active{
  border-bottom:3px solid red;
}

ul > li:hover{
  border-bottom: 3px solid yellow;
}

If you try for example to change the :hover to ul > li > a you see the double border.

ul > li.active{
  border-bottom:3px solid red;
}

ul > li > a:hover{
  border-bottom: 3px solid yellow; /* double border */
}

CSS Bootstrap stop hover border on active item

1 Answers