Css - 在 scrollbar-thumb 伪元素中应用过渡

Question

我想在将鼠标悬停在 div 中的 scroll-y 上时应用一个简单的过渡效果！

当我悬停在

::-webkit-scrollbar-thumb

上时，应用效果，除了过渡动画。有什么具体原因吗？我不能将此效果应用于伪元素？相同的效果应用于文本，它按预期发生，除了在卷轴上！它在紫色和粉红色之间突然改变颜色。

预期的结果是，当鼠标悬停时，我会看到滚动条上的过渡效果。

代码可以在这里访问和更改！

我尝试了所有的过渡，但它不起作用！