使用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.

这里的例子

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