CSS 使用 Bootstrap 在悬停时切换图标栏颜色更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25695900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Icon-bar color change on hover using Bootstrap
提问by bobbyo23
I am trying to make the .icon-bar class change color when you hover over it. I got the toggle button to change color and the icon-bar using:
当你将鼠标悬停在它上面时，我试图让 .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;
}
The hover code I used was:
我使用的悬停代码是：
.navbar-preheader .navbar-toggle .icon-bar:hover {
background-color: #4d4d4d;
}
But this is basically making each icon-bar change color, individually (see below), but they should all change color at once...
但这基本上是使每个图标栏单独改变颜色（见下文），但它们都应该立即改变颜色......
I am sure it's something silly I am missing, but any help is much appreciated. Thank you.
我确信我错过了一些愚蠢的东西，但非常感谢任何帮助。谢谢你。
回答by Josh Crozier
You are wanting to change the background color when hovering over the parent element, therefore the :hoverpseudo class should be after .navbar-toggleas opposed to the .icon-bar. In other words, you should use the selector .navbar-toggle:hover .icon-bar.
您希望在将鼠标悬停在父元素上时更改背景颜色，因此:hover伪类应该在之后.navbar-toggle而不是.icon-bar. 换句话说，您应该使用选择器.navbar-toggle:hover .icon-bar。
.navbar-preheader .navbar-toggle:hover .icon-bar {
background-color: #4d4d4d;
}
