Change webkit-scrollbar-track-piece's color when webkit-scrollbar-thumb is hovered?

user_633438 0
Viewed 3692

I have the following CSS rule:

::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #666;
}

I want to also decorate webkit-scrollbar-track-piece when webkit-scrollbar-thumb is hovered. Something like:

//  Doesn't work:
::-webkit-scrollbar-thumb:vertical:hover ::-webkit-scrollbar-track-piece {
    background-color: red !important;
}

Is this possible with just CSS using another expression that I'm not aware of? Or is this not possible to do currently?

webkit css html
2 Answers

2019 - This works for me (in Chrome at least) to lighten scrollbars on hover:

::-webkit-scrollbar:hover {
  background-color: rgba(200,200,200,.1) !important;
}

or for a particular class:

.fooClass:hover::-webkit-scrollbar {
  background-color: rgba(200,200,200,.1) !important;
}

(You can change the color/opacity ...)

user_96004590
Related