鼠标悬停scrollbar track时修改scrollbar thumb样式的可行性咨询

我需要在鼠标悬停scrollbar track（滚动条轨道）上时，改变scrollbar thumb（滚动条滑块）的颜色。我尝试了如下几种CSS写法：

&::-webkit-scrollbar-track-piece:hover {
  &::-webkit-scrollbar-thumb {
    background: blue;
  }
}

或者

&::-webkit-scrollbar-track-piece:hover + &::-webkit-scrollbar-thumb {
  background: blue;
  background-clip: content-box;
}

或者

&::-webkit-scrollbar-track-piece:hover ~ &::-webkit-scrollbar-thumb {
  background: blue;
  background-clip: content-box;
}

但这些写法均未生效，请问这种实现思路是否可行？

你尝试的这种思路不可行，原因在于WebKit的滚动条伪元素（::-webkit-scrollbar-track-piece、::-webkit-scrollbar-thumb）之间不存在父子、相邻或兄弟选择器的关联关系——它们都是滚动条容器的独立子元素，并非嵌套或相邻的DOM结构，所以无法通过轨道的hover状态直接选择滑块。

以下是两种可行的替代方案：

• 方案1：悬停整个滚动条容器间接实现
  当鼠标悬停在滚动条容器（::-webkit-scrollbar）上时，改变滑块样式，视觉上接近需求：

  &::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {
    background: blue;
  }
  

  缺点是鼠标碰到滚动条的任何区域（包括滑块），滑块都会变色，和“仅悬停轨道时变色”有细微区别。

• 方案2：反向逻辑控制（适配特定场景）
  如果轨道有默认背景色，可通过反向逻辑模拟需求：

  /* 默认滑块样式 */
  &::-webkit-scrollbar-thumb {
    background: gray;
  }
  /* 滚动条容器hover时，滑块变蓝 */
  &::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {
    background: blue;
  }
  /* 鼠标直接悬停滑块时，恢复原颜色（按需设置） */
  &::-webkit-scrollbar-thumb:hover {
    background: gray;
  }
  

  这种方式能实现“仅悬停轨道时滑块变蓝，悬停滑块时不变”的效果，需根据实际样式调整。

内容的提问来源于stack exchange，提问作者Tomáš Hrubý