Przełączanie zmiany koloru paska ikon przy najechaniu kursorem za pomocą Bootstrap

Question

Próbuję zmienić kolor klasy .icon-bar po najechaniu na niego kursorem myszy. Mam przycisk przełączania do zmiany koloru i ikon paska przy użyciu:

.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; 
} 

Kod najechania I używany był:

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

Ale to jest w zasadzie dzięki czemu każdy kolor Zmień ikonę-bar, indywidualnie (patrz poniżej), ale wszystkie one powinny zmienić kolor na raz ...

Jestem pewien, że to coś głupi jestem m issing, ale każda pomoc jest doceniana. Dziękuję Ci.

Answer 1

Ty chcąc zmienić kolor tła po najechaniu elementu nadrzędnego, dlatego klasa :hover pseudo powinny być po .navbar-toggle w przeciwieństwie do .icon-bar. Innymi słowy, powinieneś użyć selektora .navbar-toggle:hover .icon-bar.

Example Here

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