html - 悬停时为 webkit-scrollbar-track 着色

Question

我有一些 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/

在提供的代码片段中，当我将鼠标悬停在轨道上时，它会变成蓝色。当我将鼠标悬停在拇指上时，轨迹变为蓝色，而拇指变为深灰色。

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

我的推理是:

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

Answer 1

您最好不要改变轨道颜色。

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