CODEWITHSUNDEEP
htmlcsswebkit
YangTegap
YangTegap

Reputation: 431

HTML / CSS | Scrollbar - change color on div and thumb hover

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>

Upvotes: 3

Views: 6353

Answers (2)

Jack
Jack

Reputation: 1999

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>

Upvotes: 4

D M
D M

Reputation: 7179

The selector div:hover::-webkit-scrollbar-thumb is more specific than ::-webkit-scrollbar-thumb:hover which is why you are not seeing your expected behavior.

You can fix this by introducing your behavior in a selector that is more specific still: div:hover::-webkit-scrollbar-thumb:hover.

Example:

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: darkgray;
}

/* Not specific enough, will be overridden
   by the rule above. */
::-webkit-scrollbar-thumb:hover {
    background: black;
}

/* Fixed. Now specific enough to achieve
   your desired behavior. */
div:hover::-webkit-scrollbar-thumb:hover {
    background: black;
}
<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>

Upvotes: 2

Related Questions