Toggle Icon-bar color change on hover using Bootstrap

Question

I am trying to make the .icon-bar class change color when you hover over it. I got the toggle button to change color and the icon-bar using:

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

The hover code I used was:

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

But this is basically making each icon-bar change color, individually (see below), but they should all change color at once...

I am sure it's something silly I am missing, but any help is much appreciated. Thank you.

Answer 1

You are wanting to change the background color when hovering over the parent element, therefore the :hover pseudo class should be after .navbar-toggle as opposed to the .icon-bar. In other words, you should use the selector .navbar-toggle:hover .icon-bar.

Example Here

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