特定状态下的样式 webkit 滚动条

Question

我希望我的 WebKit 滚动条 在其容器悬停时具有不同的颜色。我希望整个滚动条亮起。

我在想这样的事情可以解决问题（但事实并非如此）：

 .scroller:hover::-webkit-scrollbar {
  background: green;
}

我以相同的方式设置滚动条的样式：在 .scroller 上，而不是全局。 （有效： .scroller::-webkit-scrollbar ）我想要溢出的div，而不是文档。

另一个（相关）问题：将鼠标悬停在滚动条上时点亮拇指。这不起作用：

 .scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb

原文由 Rudie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更改背景颜色对我来说很好。

http://jsfiddle.net/QcqBM/1

 div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

您确定您的 CSS 调用没有其他问题吗？

原文由 mrtsherman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用纯 CSS 可以做到这一点，至少在 Chrome 版本 29 中是这样。

http://jsfiddle.net/eR9SP/

要在其容器（在本例中为 .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 */ }

此外，您可以在滚动条拇指悬停或活动（被单击）时使用以下内容设置滚动条拇指本身的样式：

 .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 */ }

原文由 Michael 发布，翻译遵循 CC BY-SA 3.0 许可协议