在悬停时着色webkit-scrollbar-track [英] Coloring webkit-scrollbar-track on hover

问题描述

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

  ::  -  webkit-scrollbar {width：12px;身高：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; 
字体：16px / 1.5 Arial; 
颜色：＃444; 
 border：1px solid #ddd; 
 margin：20px; 
 padding：20px; 
 max-width：300px; 
 height：200px; 
} 
  

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

在代码片段只要我把鼠标悬停在轨道上，就会变成蓝色。当我将鼠标悬停在拇指上时，轨迹变成蓝色，拇指变成深灰色。

我希望能够反转这种行为。我想拇指在轨道高亮时变成深灰色，并且我希望在拇指徘徊时轨道保持白色。这是可能的CSS或JavaScript？

我的推理是：

• 鼠标悬停在轨道上 - 单击将执行一个可以移动拇指的动作。所以，我认为在盘旋轨道时拇指应该改变颜色，因为它是可以移动的拇指。


• 将鼠标悬停在拇指上时 - 改变轨道的颜色不会'没有意义。拇指是活动元素。

解决方案

您可以做的最好的方式是不要改变曲目颜色。 / p>

我不知道当你只在轨道上盘旋时如何改变大拇指的颜色。我尝试将JQuery添加到您的小提琴示例中，但它不承认 .scroller :: - webkit-scrollbar-track 作为放置悬停事件的有效事项，I因为这不是一个标准。

I've got some CSS which highlights webkit's scrollbar track and thumb. It looks like this:

::-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;
}

and here's a JSFiddle: http://jsfiddle.net/eR9SP/21/

In the code-snippet provided, when I hover over the track it turns blue. When I hover over the thumb, the track turns blue and the thumb turns dark gray.

I am hoping to invert this behavior. I would like to thumb to turn dark gray when the track is highlighted and I would like the track to remain white when the thumb is hovered. Is that possible with CSS or JavaScript?

My reasoning is:

• When the mouse is hovering over the track -- clicking will perform an action which moves the thumb. So, I think the thumb should change color when hovering the track because it is the thumb which will move.
• When hovering your mouse over the thumb -- changing the color of the track doesn't make sense. The thumb is the active element.

解决方案

The best you can do is to not have the track color change.

I don't know how you would make the thumb's color change when hovering only over the track. I tried adding JQuery to your fiddle example, but it didn't recognize .scroller::-webkit-scrollbar-track as a valid thing to put a hover event on, I guess because it's not a standard.

这篇关于在悬停时着色webkit-scrollbar-track的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！