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

debugcn 发表于 Dev

杨德格

我希望我的可滚动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>

达科他·梅思文（Dakota Methvin）

选择器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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。