Style webkit scrollbar on certain state

问题:

I'd like my WebKit scrollbars to have a different color when its container is hovered over. I want the entire scrollbar to light up.

I was thinking something like this would do the trick (but it doesn't):

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

I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.

Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:

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

回答1:

Changing the background color works just fine for me.

http://jsfiddle.net/QcqBM/1

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

Are you sure there isn't something else wrong with your CSS call?

回答2:

This is possible using pure CSS, at least with Chrome version 29.

http://jsfiddle.net/eR9SP/

To style the scrollbar when its container (in this case .scroller) is hovered over, use:

.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 */ }

Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:

.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 */ }