HTML / CSS |滚动条 - 在 div 和拇指悬停时更改颜色

Question

我希望我的可滚动 div 的滚动条具有浅色基色，然后在将鼠标悬停在可滚动 div 上时变暗，然后在将鼠标悬停在滚动条拇指上时变黑。

不幸的是，对于我当前的 CSS，当鼠标悬停在 div 上时，拇指只会变成较深的颜色，但不会变黑。我怀疑这是因为拇指在技术上仍悬停在可滚动 div 中，所以我的 div:hover 正在覆盖我的拇指悬停。

我可以更改什么以使它按预期工作？

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>

Answer 1

选择器 div:hover::-webkit-scrollbar-thumb 比 ::-webkit-scrollbar-thumb:hover 更具体，这就是您没有看到预期行为的原因。

您可以通过在更具体的选择器中引入您的行为来解决此问题：div:hover::-webkit-scrollbar-thumb:hover.

示例：

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>

Answer 2

正如 Dakota Methvin 所提到的，它正在被忽视。解决这个问题的最简单方法是使用 !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>

HTML / CSS |滚动条 - 在 div 和拇指悬停时更改颜色

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

html

css

webkit