如何在悬停时更改滚动条的框阴影

Question

我已经创建了一个带有6个插入框阴影的滚动条，并希望当我悬停在滚动条上时这些阴影可以改变颜色。目前，当我悬停在上面时，没有任何变化。以下是我迄今为止在CSS中为滚动条编写的代码：

::-webkit-scrollbar {
  width: 20px;
}
 ::-webkit-scrollbar-track {
  background-color: mediumpurple;
}
 ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: 0px 100px 15px indigo inset, 0px -10px 10px indigo inset, 0px 250px 20px darkmagenta inset, 0px -20px 10px darkmagenta inset, 0px 400px 30px mediumorchid inset, 3px 650px 10px violet inset;
}
 ::-webkit-scrollbar-thumb:hover {
  box-shadow: 0px 100px 15px transparent inset, 0px -10px 10px transparent inset, 0px 250px 20px transparent inset, 0px -20px 10px transparent inset, 0px 400px 30px transparent inset, 3px 650px 10px transparent inset, 0px 100px 15px violet inset, 0px - 10px 10px violet inset, 0px 250px 20px plum inset, 0px -20px 10px plum inset, 0px 400px 30px thistle inset, 3px 650px 10px lavender inset;
}

Answer 1

这里的一切看起来都很好，但您只是错过了一点。0px - 10px 10px violet inset这一行将使您的整个box-shadow属性无效，因为它在第二个元素中有一个无序，所以您只需要像这样修复它：

0px -10px 10px violet inset

以下是完整的工作代码：

body {
  height: 150vh;
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: mediumpurple;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: 0px 100px 15px indigo inset, 0px -10px 10px indigo inset, 0px 250px 20px darkmagenta inset, 0px -20px 10px darkmagenta inset, 0px 400px 30px mediumorchid inset, 3px 650px 10px violet inset;
}
::-webkit-scrollbar-thumb:hover {
  box-shadow: 0px 100px 15px transparent inset, 0px -10px 10px transparent inset, 0px 250px 20px transparent inset, 0px -20px 10px transparent inset, 0px 400px 30px transparent inset, 3px 650px 10px transparent inset, 0px 100px 15px violet inset, 0px -10px 10px violet inset, 0px 250px 20px plum inset, 0px -20px 10px plum inset, 0px 400px 30px thistle inset, 3px 650px 10px lavender inset;
}