Bootstrap - 無法覆蓋僞類的屬性

Question

我基本上試圖完成懸停效果。我似乎不能使用下面的代碼僞類的屬性來覆蓋：

CSS：

<style type="text/css"> 
     li:hover 
     { 
      color: #000000 !important; 
      background-color: #ff8c00; 
     } 
    </style> 

HTML：

  <nav class="navbar-inverse"> 
        <ul class="nav nav-justified" style="font-size: 1.3em;"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#" style="color:white;">About Us</a></li> 
         <li><a href="#" style="color:white;">Contact</a></li> 
         <li><a href="#" style="color:white;">Sign Up</a></li> 
         <li><a href="#" style="color:white;">Login</a></li> 
        </ul> 
     </nav> 

如果我從取出的nav類ul元素，懸停功能工作正常，但結構看起來非常醜陋。我怎樣才能使這個工作？

更新：

上傳於jsfiddle

Answer 1

我的代碼，你需要指定這樣的CSS：

<style type="text/css"> 
     .nav>li>a:hover 
     { 
      color: #000000; 
      background-color: #ff8c00; 
     } 
    </style> 

這樣，類nav用最直接的嵌套子li和a標籤與僞類:hover將被選中，bootstrap標準將被覆蓋。

Answer 2

活動類將無法工作，因爲規則只在:hover 指定要應用上的活動樣式，以及你將不得不調用CSS的活動類以及

.nav>li>a:focus, 
.nav>li>a:hover, 
.nav>li>a:active 
{ 
    color: #000000; 
    background-color: #ff8c00; 
}