使用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;
}