Переключить изменение цвета значка на панели с помощью Bootstrap

Я пытаюсь изменить цвет класса .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;
}

Но это в основном делает каждый цвет значка-стрелки индивидуальным (см. ниже), но все они должны сразу менять цвет...

enter image description hereenter image description here

Я уверен, что что-то глупое мне не хватает, но любая помощь очень ценится. Спасибо.

ОТВЕТЫ

Ответ 1

Вы хотите изменить цвет фона при зависании над родительским элементом, поэтому псевдокласс класса :hover должен быть после .navbar-toggle в отличие от .icon-bar. Другими словами, вы должны использовать селектор .navbar-toggle:hover .icon-bar.

Пример здесь

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