Стиль полосы прокрутки webkit в определенном состоянии

Я хочу, чтобы мои полосы прокрутки WebKit имели другой цвет, когда его контейнер завис над. Я хочу, чтобы вся полоса прокрутки загоралась.

Я думал, что что-то вроде этого поможет (но это не так):

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

Я стилизовал полосы прокрутки таким же образом: на .scroller, а не глобально. (Это работает: .scroller::-webkit-scrollbar) Я хочу, чтобы переполненные div были особенными, а не документ.

Другая (связанная) проблема: загорается большой палец при наведении курсора на полосу прокрутки. Это не работает:

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

css scrollbar webkit
person Rudie    schedule 26.12.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Изменение цвета фона у меня работает нормально.

http://jsfiddle.net/QcqBM/1

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

Вы уверены, что в вашем вызове CSS нет ничего плохого?

person mrtsherman    schedule 26.12.2011
comment
Ага... Это как раз то, к чему я стремился: jsfiddle.net/rudiedirkx/QcqBM/ 2 А как насчет другой связанной с этим проблемы? Наведите указатель мыши на scrollbar, чтобы зажечь scrollbar-thumb. (Я использовал track вместо thumb несколько раз, мой плохой.) - person Rudie; 26.12.2011
comment
Возможно, элементы псевдо (полосы прокрутки) не имеют состояний наведения... Или иерархии. Это было бы отстойно. - person Rudie; 26.12.2011
comment
У меня тоже работает изменение цвета большого пальца при наведении - jsfiddle.net/QcqBM/3 - person mrtsherman; 27.12.2011
comment
Это .scroller:hover. Я хочу, чтобы цвет большого пальца изменился на scrollbar:hover. Но для этого потребуется некоторая иерархия: .scroller::scrollbar:hover ::thumb и это, похоже, не работает. Или я опять не так делаю?? - person Rudie; 27.12.2011
comment
Извините, теперь я наконец понял. Я не думаю, что это выполнимо, потому что псевдоэлементы принадлежат родительскому элементу. Они не иерархичны друг другу. Вы должны быть в состоянии заставить его работать с javascript. Вот пример использования jQuery для получения желаемого эффекта. jsfiddle.net/QcqBM/6 - person mrtsherman; 27.12.2011
comment
Все это можно сделать с помощью чистого CSS. (По крайней мере, с Chrome версии 29.) См. мой ответ здесь: stackoverflow.com/a/19171215/136590 - person Michael; 04.10.2013

arrow_upward
12
arrow_downward

Это возможно с использованием чистого 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 */ }
person Michael    schedule 04.10.2013
comment
Я хочу выделить большой палец, когда вы наводите курсор на дорожку, что будет выглядеть примерно так: .scroller::track:hover ::thumb, но псевдоэлементы полосы прокрутки не имеют иерархии, поэтому я думаю, что это невозможно. - person Rudie; 04.10.2013
comment
Ах я вижу. Да, похоже, что это невозможно с чистым CSS. - person Michael; 04.10.2013
comment
Кроме того, это не работает для регулировки ширины/высоты полосы прокрутки. Например: .scroller::-webkit-scrollbar:hover {background:yellow;width:20px} Изменит цвет фона на желтый при наведении, но ширина не изменится. - person diggie; 26.04.2014