将鼠标悬停在滚动条上时更改滚动条的宽度



我正在更改悬停时滚动条的css,因此每当用户在滚动条上(而不是在div上(时,滚动条的宽度都应该恢复正常。

width: 8px;
}
::-webkit-scrollbar:hover {
width: 50px;
background:rgb(204 204 204 / 1);
}

我试过了,但似乎不起作用。

这能回答您的问题吗?

看看这个问题:更改悬停上的webkit滚动条宽度时的Redraw问题

div {
width: 300px;
height: 300px;
overflow-y: scroll;
background-color: blue;
}
/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar:hover {
height: 40px;
width: 40px;
}

::-webkit-scrollbar-thumb {
background-color: red;
}
::-webkit-scrollbar-thumb:hover {
background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
width: 40px;
/*background-color: red !important;*/
}
::-webkit-scrollbar-track-piece {
/*background-color: #efefef;*/
}
::-webkit-scrollbar-thumb:vertical {
/*background-color: #666;*/
}
<div><img src="http://placehold.it/500x500" /></div>

最新更新