Question

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

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

.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调用没有其他问题吗？

样式webkit滚动条在某些状态

2 个答案: