CODEWITHSUNDEEP
c#css
Mikael Sauriol Saad
Mikael Sauriol Saad

Reputation: 122

Change scrollbar color on hover CSS

I'm trying to change the scrollbar color on hover in my application and for some reason, when i hover over it, it becomes red. Here's my code: 

    .scroller {
position: absolute;
top: 120px;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin-bottom: 10px;
overflow: auto;

} 

    .scrooler:hover{  
      color: blue;
    }

With this code, all it does is as soon as I hover over my table, all the text becomes blue. i'm having a hard time getting only the scrollbar since I think it is directly within the table. Is there any way of targeting the scrollbar only?

Upvotes: 3

Views: 5913

Answers (2)

EpicKip
EpicKip

Reputation: 4043

The scrollbar is part of the table and color will be the text color (as always), but in css there is a special property for scrollbars: 

scrollbar-base-color:YOURCOLOR;

just put this in your existing class

Upvotes: 0

marcosvolpato
marcosvolpato

Reputation: 106

Try this:

.scroller::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #000;
}

Upvotes: 7

Related Questions