在使用引导程序悬停时切换图标栏颜色更改

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

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

Example Here

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