在使用引導程序懸停時切換圖標欄顏色更改

Question

我試圖讓懸停在其上的.icon-bar類更改顏色。我得到了切換按鈕使用改變顏色和圖標條：

.navbar-preheader .navbar-toggle { 
    border: 1px solid white; 
    background-color: transparent; 
    margin-right: 0; 
} 

.navbar-preheader .navbar-toggle:hover { 
    background-color: #4d4d4d; 
} 

.navbar-preheader .navbar-toggle .icon-bar { 
    background-color: white; 
} 

我使用的懸停代碼爲：

.navbar-preheader .navbar-toggle .icon-bar:hover { 
    background-color: #4d4d4d; 
} 

但是這基本上使每一個圖標條變色，單獨（見下文），但他們都應該改變顏色一次......

我相信這是一些愚蠢的我米發佈，但任何幫助非常感謝。謝謝。

Answer 1

您想要在將鼠標懸停在父元素上時更改背景顏色，因此僞類應該在.navbar-toggle之後，而不是.icon-bar。換句話說，你應該使用選擇器.navbar-toggle:hover .icon-bar。

Example Here

.navbar-preheader .navbar-toggle:hover .icon-bar { 
    background-color: #4d4d4d; 
}