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

【问题标题】：Style webkit scrollbar on certain state特定状态下的样式 webkit 滚动条
【发布时间】：2012-01-27 18:41:39
【问题描述】：

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

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

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

我以同样的方式设置滚动条的样式：.scroller，而不是全局。（有效：.scroller::-webkit-scrollbar）我希望溢出的 div 是特殊的，而不是文档。

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

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

【问题讨论】：

标签： css webkit scrollbar

【解决方案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 */ }

【讨论】：

我想在您将鼠标悬停在轨道上时突出显示拇指，这看起来像：.scroller::track:hover ::thumb，但滚动条伪元素没有层次结构，所以我认为这是不可能的。
啊，我明白了。是的，看起来这对于纯 CSS 是不可能的。
另外，这似乎不适用于调整滚动条的宽度/高度。例如： .scroller::-webkit-scrollbar:hover {background:yellow;width:20px} 悬停时会改变背景颜色为黄色，但宽度不会改变。

【解决方案2】：

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

http://jsfiddle.net/QcqBM/1

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

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

【讨论】：

嗯嗯...这就是我想要的：jsfiddle.net/rudiedirkx/QcqBM/2 还有其他相关问题呢？将鼠标悬停在scrollbar 上以点亮scrollbar-thumb。（我用了几次track 而不是thumb，我的错。）
也许伪（滚动条）元素没有悬停状态......或者层次结构。那会很糟糕。
更改悬停时的拇指颜色也适用于我 - jsfiddle.net/QcqBM/3
那是.scroller:hover。我希望在scrollbar:hover 上更改拇指颜色。但这需要一些层次结构：.scroller::scrollbar:hover ::thumb，这似乎不起作用。还是我又做错了？？
对不起，我终于明白了。我认为这是不可行的，因为伪元素属于父元素。它们不是相互分层的。您应该能够使其与 javascript 一起使用。这是一个使用 jQuery 来获得您想要的效果的示例。 jsfiddle.net/QcqBM/6