完全透明的引導按鈕，但仍然活躍

Question

我想提出與字體真棒內做出的唯一可見的文本的按鈕：

HTML

<button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <i class="fa fa-bars"></i> 
</button> 

我強迫所有的邊框，背景等透明：

CSS

.btn { 
    outline: none; 
    border: 0px; 
    box-sizing: none; 
    background-color: transparent; 
} 

那麼，除非我點擊按鈕，否則工作良好。然後顯示默認的藍色Bootstrap邊框。如何使所有類似按鈕的功能變得透明，但在懸停事件時保持文本高亮顯示（更改爲藍色）？我曾嘗試將.btn:active添加到CSS文件，但無法正常工作。

這裏是JSFiddle。水平調整大小。單擊右側帶有小節的按鈕以查看我需要消除的藍色邊框。

Answer 1

由於您重寫了Bootstrap類，您很可能需要對規則更加具體。見Specificity

範例CSS：

.navbar .navbar-toggle, 
.navbar .navbar-toggle:focus { 
    outline: none; 
    border: 0; 
    box-shadow: none; 
    background-color: transparent; 
} 

工作實例：

.navbar .navbar-header .navbar-toggle, 
 
.navbar .navbar-header .navbar-toggle:focus { 
 
    outline: none; 
 
    border: 0; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="menu"> 
 
    <nav class="navbar navbar-fixed-top"> 
 
    <div class="container"> 
 

 
     <div class="navbar-header"> 
 
     <button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <i class="fa fa-bars"></i> 
 
     </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">A</a> 
 
      </li> 
 
      <li><a href="#">B</a> 
 
      </li> 
 
      <li><a href="#">C</a> 
 
      </li> 
 
      <li><a href="#">D</a> 
 
      </li> 
 
      <li><a href="#">E</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>