使用:: - webkit-scrollbar：hover时，无法在悬停时更改自定义滚动条的宽度

Question

我正在尝试制作一个自定义滚动条，以便在光标接近它时更改其宽度。 （这是一个Electron应用程序，所以它只需要在Chrome中工作）。

我不知道如何在光标离它几px时触发宽度变化，所以我只是在:hover上指定了不同的宽度：

代码

::-webkit-scrollbar {    
  background-color: lightGrey;
  width: 18px;
} 


::-webkit-scrollbar-thumb:hover {
  width: 30px;
  background-color: red;
}

::-webkit-scrollbar-thumb {
  background-color: grey;
}

所有代码（使用Vue框架）： https://codepen.io/anon/pen/eVYQvq

这是一个简单的HTML版本： https://codepen.io/anon/pen/EQxGZX

问题

正如您从codepen中看到的那样，它会在悬停时改变颜色，但不会改变宽度。