Переключить значок-изменение цвета панели при наведении с помощью 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

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

11
css toggle twitter-bootstrap twitter-bootstrap-3

1 ответов

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

Пример

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