悬停时为 webkit-scrollbar-track 着色答案

【问题标题】：Coloring webkit-scrollbar-track on hover悬停时为 webkit-scrollbar-track 着色
【发布时间】：2014-04-09 23:07:26
【问题描述】：

我有一些 CSS 突出显示 webkit 的滚动条轨道和拇指。它看起来像这样：

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: white; }
::-webkit-scrollbar-thumb { background: #ddd; }
::-webkit-scrollbar-thumb:hover { background: #999; }
::-webkit-scrollbar-track:hover { background: blue; }

.scroller
{
    overflow: auto;
    font: 16px/1.5 Arial;
    color: #444;
    border: 1px solid #ddd;
    margin: 20px;
    padding: 20px;
    max-width: 300px;
    height: 200px;
}

这是一个 JSFiddle：http://jsfiddle.net/eR9SP/21/

在提供的 code-sn-p 中，当我将鼠标悬停在轨道上时，它会变成蓝色。当我将鼠标悬停在拇指上时，轨道变为蓝色，而拇指变为深灰色。

我希望扭转这种行为。当轨道突出显示时，我想拇指变成深灰色，当拇指悬停时，我希望轨道保持白色。这可以用 CSS 或 JavaScript 实现吗？

我的理由是：

当鼠标悬停在轨道上时——单击将执行移动拇指的动作。所以，我认为当鼠标悬停在轨道上时，拇指应该会改变颜色，因为拇指会移动。
将鼠标悬停在拇指上时 - 更改轨道颜色没有意义。拇指是活动元素。

【问题讨论】：

标签： html css

【解决方案1】：

你能做的最好的就是不改变轨道颜色。

我不知道当只将鼠标悬停在轨道上时如何使拇指的颜色发生变化。我尝试将 JQuery 添加到您的小提琴示例中，但它没有将 .scroller::-webkit-scrollbar-track 识别为放置悬停事件的有效方法，我猜是因为它不是标准。

【讨论】：