a: hover çalışmaz, önyükleme

Question

Bazı nedenlerle, vurgulu CSS çalışmıyor. Bazı css ile bootstrap kullanıyorum. Benim kodumda yanlış bir şey mi var, yoksa bootstrap'ın kodu benimkini geçersiz kılıyor mu?

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

varsayılan Bootstrap stil more specific olduğu için böyle.

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

nedenle şunu kullanabilirsiniz:

Bu

geçersiz kılmak için gereken seçiciler tam olarak görmeden

Working Example Here

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

Answer 2

ne oluyor, sen sorunu sırasız listenizde bir sınıf belirtmemekle ilgili olabilir.

Bu sorunu çözebilir:

ul.navbar-nav > li > a { 
color:black; 
padding: 15px; 
} 

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