如何更改自舉中懸停效果的li標籤的顏色3

Question

我試圖在將鼠標懸停在引導程序中的每個鏈接上時獲得橙色懸停效果。我不希望鏈接文字顏色改變，但我希望有一個背景顏色：橙色;爲每個鋰標籤本身。

沒有人知道我可以複製這個HTML代碼的懸停效果：

.navbar-collapse .navbar-nav > li:hover { 

\t background:orange; 
}

\t <div class="navbar navbar-fixed-top"> 
\t \t \t <nav class="navbar navbar-inverse"> 
\t \t \t \t <div class="container"> 
\t \t \t \t \t <div class="navbar-header"> 
\t \t \t \t \t \t <a href="" class="navbar-brand">Server Plex</a> 
\t \t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#example"> 
\t \t \t \t \t \t <span class="icon-bar"></span> 
\t \t \t \t \t \t <span class="icon-bar"></span> 
\t \t \t \t \t \t <span class="icon-bar"></span> 
\t \t \t \t \t \t </button> 
\t \t \t \t \t </div> 
\t \t \t \t \t <div class="collapse navbar-collapse"> 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
\t \t \t \t \t \t \t <li><a href="#">Link1</a></li> 
\t \t \t \t \t \t \t <li><a href="#">Link2</a></li> 
\t \t \t \t \t \t \t <li><a href="#">Link3</a></li> 
\t \t \t \t \t \t </ul> 
\t \t \t \t \t \t <form action="" class="navbar-form navbar-right" role="search"> 
\t \t \t \t \t \t \t <div class="form-group"> 
\t \t \t \t \t \t \t \t <input type="text" class="form-control" placeholder="Search here" /> 
\t \t \t \t \t \t \t </div> 
\t \t \t \t \t \t \t <button type="submit" class="btn btn-danger">Submit</button> 
\t \t \t \t \t \t </form> 
\t \t \t \t \t </div> 
\t \t \t \t </div> 
\t \t \t </nav> 
\t </div>

Answer 1

我可以給你改變自舉類，它們嵌套特別是自舉類最好的建議在其他自舉類中，例如navbar。創建ID，並從ID選擇，然後使用>運營商去通過DOM ...

<div class="navbar navbar-fixed-top" id="main-navbar"> 
     <nav class="navbar navbar-inverse"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a href="" class="navbar-brand">Server Plex</a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#example"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Link1</a></li> 
         <li><a href="#">Link2</a></li> 
         <li><a href="#">Link3</a></li> 
        </ul> 
        <form action="" class="navbar-form navbar-right" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search here" /> 
         </div> 
         <button type="submit" class="btn btn-danger">Submit</button> 
        </form> 
       </div> 
      </div> 
     </nav> 
</div> 

 

#main-navbar .navbar-collapse .navbar-nav > li:hover { 

    background:orange; 
}