《CSS 知识点》滚动条仅在 hover 时才显示（宽度不改变）

AvatarGiser

于 2024-12-10 17:30:37 发布

阅读量553

点赞数 2

分类专栏： CSS 小知识点文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/sinat_31213021/article/details/144379004

版权

CSS 小知识点专栏收录该内容

37 篇文章

订阅专栏

很简单！

滚动条的滑动小方块背景色默认透明，仅在hover时设置背景色；
滚动条的轨道背景色默认透明，仅在hover时设置背景色；

/*滚动条的滑动小方块*/
::-webkit-scrollbar-thumb {
    background: transparent;
}
/*hover状态*/
:hover::-webkit-scrollbar-thumb {
    background: red;
}

/*滚动条的轨道*/
::-webkit-scrollbar-track {
    background: transparent;
}
/*hover状态*/
:hover::-webkit-scrollbar-track {
    background: green !important;
}