css鼠标移至滚动条变粗

需求为：默认情况滚动条浅色且较细，用户将鼠标移至滚动条上则变成深色且加粗。

图1 原滚动条

图2 鼠标hover后加粗变色

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
//滚动条的轨道的两端按钮 此处隐藏
*::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
  display: none;
}
//边角，即垂直滚动条和水平滚动条相交的地方
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
//
*::-webkit-scrollbar-thumb {
  border: 1px solid rgba(0, 0, 0, 0);
  height: 6px;
  border-radius: 25px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.30);
}
//滚动条里面的小方块，能向上向下移动(或向左向右移动) 指上去的时候显示border和改变颜色造成视觉上的加粗变色
*::-webkit-scrollbar-thumb:hover{
  border: 2px solid rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.70);
}