样式webkit滚动条在某些状态

Question

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

我在想这样的事情可以解决问题(但事实并非如此):

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

我用相同的方式设置了滚动条的样式:打开.scroller,而不是全局.(这有效.scroller::-webkit-scrollbar:)我希望溢出的div特殊,而不是文档.

另一个(相关)问题:将鼠标悬停在滚动条上时点亮拇指.这不起作用:

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

Answer 1

这可以使用纯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 */ }

Answer 2

改变背景颜色对我来说很好.

http://jsfiddle.net/QcqBM/1

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

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