使用 Bootstrap 在悬停时切换图标栏颜色变化

Question

我正在尝试让 .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;
}

但这基本上是让每个图标栏单独改变颜色（见下文），但它们应该同时改变颜色......

我确信我错过了一些愚蠢的东西，但非常感谢任何帮助。谢谢。

Answer 1

您希望在将鼠标悬停在父元素上时更改背景颜色，因此:hover 伪类应该在.navbar-toggle 之后而不是.icon-bar。换句话说，您应该使用选择器.navbar-toggle:hover .icon-bar。

Example Here

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