Menu
I want my scrollbar of my scrollable div to have a light base color, then change darker when hovering over the scrollable div, then go black when hovering over the scrollbar thumb.
Unfortunately, with my current CSS, the thumb is only changing to the darker color when hovering over the div, but will not go black. I suspect this is because the thumb is still technically hovering in the scrollable div, so my div:hover is overwriting my thumb hover.
What can I change to make this work as intended?
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div#scrollable{
border: 5px red solid;
width: 150px;
height: 200px;
overflow-y: scroll;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: white;
}
::-webkit-scrollbar-thumb{
background: lightgray;
border-radius: 10px;
}
div:hover::-webkit-scrollbar-thumb{
background: gray;
}
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<div id="scrollable">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</body>
</html>
711
asked Nov 23 '25 21:11
As mentioned by Dakota Methvin, it's getting overided. The simplest way to fix that is with !important.
div#scrollable {
border: 5px red solid;
width: 150px;
height: 200px;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: lightgray;
border-radius: 10px;
}
div:hover::-webkit-scrollbar-thumb {
background: gray;
}
::-webkit-scrollbar-thumb:hover {
background: black !important;
}<div id="scrollable">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With