2014-04-18 541 views
1

在我的Twitter引導程序網站,我有一個導航欄。它有它的按鈕。
我爲它們添加了「btn-success」或「btn-danger」類以用於顏色標記。
我做這個,因爲當用戶更改主題(css)按鈕顯示相對於that theme。我使用navbar-inverse。所以背景是黑色的。我將按鈕鏈接的顏色更改爲白色。但問題是當用戶在按鈕上懸停時,按鈕變得透明並且不能讀取顏色。Twitter引導程序導航欄按鈕顏色變化懸停

所以我需要導航欄按鈕是可見的,即使用戶懸停在它上面。懸停或不懸停時,我希望按鈕顏色相同。

我的小提琴:http://jsfiddle.net/mavent/4RhhF/15/

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header" style="text-align:center;"> 
     <div style="padding-top: 15px;"> 
      <a href="/page0" style="color:#ffffff;margin-top:40px;">Example.com</a>  
     </div> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a class="btn btn-danger" style="color:#000" href="#"> 
        <span>MyButton is very good</span> 
       </a>  
      </li> 
      <li> 
       <a class="btn btn-success" style="color:#000" href="#"> 
        <span>MyButton is very good 2</span> 
       </a>  
      </li> 
     </ul> 
    </div> 
</nav> 
+0

先生,你已經有了一個前衛! ;) – webeno

回答

1

你必須添加在您的自定義CSS文件如下:

/* This would be for the danger button... */ 
.navbar-inverse .navbar-nav>li>a.btn-danger:hover { 
    background-color: #d9534f; 
} 

/* ...and this one for the success button */ 
.navbar-inverse .navbar-nav>li>a.btn-success:hover { 
    background-color: #5cb85c; 
} 

你基本上手動重新着色每個按鈕的背景顏色懸停。

這裏是your updated fiddle