A: hang does not work, with bootstrap

Question

So for some reason my CSS hover is not working. I use bootstrap with some of my css. Is there something wrong with my code, or is it because the boot code overrides mine?

HTML

<nav class="navbar navbar-default navbar-fixed-top"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">About</a></li> </ul> </div> </nav> 

CSS

 ul>li>a { color: black; padding: 15px; } ul>li>a:hover { background-color: #B0B0B0; color: red; } 

Answer 1

This is because the default Bootstrap style is more specific .

This is a selector that needs to be redefined:

 .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #333; background-color: transparent; } 

Therefore you can use:

Working example here

 .navbar-default .navbar-nav>li>a:hover { background-color: #B0B0B0; color: red; } 

Answer 2

Not seeing exactly what is happening, the problem you are facing may be due to the fact that you are not specifying the class in your unordered list.

This may solve the problem:

 ul.navbar-nav > li > a { color:black; padding: 15px; } ul.navbar-nav > li > a:hover { background-color: #B0B0B0; color:red; }