如何让滚动条的框阴影在悬停时发生变化？

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;
}

如何让滚动条的框阴影在悬停时发生变化？

How do I get the box-shadows of my scrollbar to change on hover?

css

colors

scrollbar

hover