Стиль полосы прокрутки webkit на определенное состояние - PullRequest
Новая
       41

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

4 голосов
/ 26 декабря 2011

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

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

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

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

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

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

Ответы [ 2 ]

10 голосов
/ 04 октября 2013

Это возможно при использовании чистого 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 */ }
5 голосов
/ 26 декабря 2011

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

http://jsfiddle.net/QcqBM/1

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

Вы уверены, что с вашим вызовом CSS что-то не так?

...