如何让我的滚动条的方框阴影在悬停时改变？

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条轨道背景色 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条滑块背景色 */
  border-radius: 5px; /* 设置滚动条滑块圆角 */
}

/* 滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滚动条滑块悬停时的背景色 */
}

/* 应用自定义滚动条样式 */
.element-with-scrollbar {
  overflow: auto; /* 设置元素内容溢出时显示滚动条 */
}

<div class="element-with-scrollbar">
  <!-- 内容 -->
</div>