CSS 特定状态下的样式 webkit 滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8632410/
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
Style webkit scrollbar on certain state
提问by Rudie
I'd like my WebKit scrollbarsto have a different color when its container is hovered over. I want the entire scrollbar to light up.
我希望我的WebKit 滚动条在其容器悬停时具有不同的颜色。我希望整个滚动条都亮起来。
I was thinking something like this would do the trick (but it doesn't):
我在想这样的事情可以解决问题（但事实并非如此）：
.scroller:hover::-webkit-scrollbar {
background: green;
}
I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.
我以相同的方式设置滚动条的样式： on .scroller，而不是全局。（那有效.scroller::-webkit-scrollbar：）我想要溢出的 div 特殊的，而不是文档。
Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:
另一个（相关）问题：将鼠标悬停在滚动条上时点亮拇指。这不起作用：
.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb
回答by Michael
This is possible using pure CSS, at least with Chrome version 29.
这可以使用纯 CSS 实现，至少在 Chrome 29 版中是这样。
To style the scrollbar when its container (in this case .scroller) is hovered over, use:
要在其容器（在本例中.scroller）悬停时设置滚动条的样式，请使用：
.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }
Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:
此外，当滚动条悬停或处于活动状态（被单击）时，您可以使用以下方法设置滚动条缩略图本身的样式：
.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }
回答by mrtsherman
Changing the background color works just fine for me.
更改背景颜色对我来说效果很好。
div#container:hover::-webkit-scrollbar {
background: lightyellow;
}
Are you sure there isn't something else wrong with your CSS call?
您确定您的 CSS 调用没有其他问题吗？
