Toggle Icon-bar Farbänderung bei Hover mit Bootstrap

Question

Ich versuche, die ICON-Bar-Klasse Farbe ändern, wenn Sie den Mauszeiger darüber bewegen. Ich habe auf den Schalter, mit Farbe und das Symbol-Leiste zu ändern:

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

Der Hover-Code, den ich verwendet wurde:

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

Aber im Grunde macht jede Farbe Symbol-Leiste ändern, einzeln (siehe unten), aber sie sollten alle die Farbe wechseln auf einmal ...

ich bin sicher, es ist etwas dumm ich bin m Issing, aber jede Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

Sie wollen die Hintergrundfarbe ändern, wenn sie über das übergeordnete Element schwebt daher die :hover Pseudo-Klasse sollte nach .navbar-toggle sein in Bezug auf die .icon-bar gegenüber. Mit anderen Worten, Sie sollten den Selektor .navbar-toggle:hover .icon-bar verwenden.

Example Here

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