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

问题描述

我要在悬停时更改滚动条的css，因此，每当用户在滚动条上（而不是在div上）时，滚动宽度应恢复正常。

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

我已经尝试过了，但是似乎没有用。

解决方法

这能回答您的问题吗？

看看这个问题： Redraw issue when changing webkit-scrollbar width on hover

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>