html – 如何向滚动条添加额外的悬停效果

在我的CSS中,我改变了滚动条的样式,它看起来像

body::-webkit-scrollbar {
  width: 0.7em;
}
body::-webkit-scrollbar-track {
  -webkit-Box-shadow: inset 0 0 6px rgba(154,165,159,0.5);
}
body::-webkit-scrollbar-thumb {
  background-color: #D0CACD;
  outline: 1px solid LightGrey;
  Box-shadow: 7px 7px 50px grey;
}

有用.如果我添加悬停：

body::-webkit-scrollbar-thumb:hover {
  background-color: #b8c0bc; 
}

然后它也适用于我添加webkit动画,然后为什么它不起作用.添加webkit动画后,它看起来像：

body::-webkit-scrollbar-thumb:hover {
  background-color: #b8c0bc;
  -webkit-animation: scrollbig 1s; 
  animation: scrollbig 2s; 
}

动画无法播放.为什么？我正在使用谷歌浏览器.你还可以看到@keyframe动画代码：

@-webkit-keyframes scrollbig {
  from {width: 0.6em;}
  to {width: 0.9em;}
}

请告诉我们如何制作动画.
特别感谢.

最佳答案

我可以看到,有几个理由说明为什么这不起作用.

你不能设置body :: – webkit-scrollbar-thumb的宽度.它将始终与body :: – webkit-scrollbar相同.

你无法改变body :: – webkit-scrollbar的宽度：hover.有或没有动画.

body::-webkit-scrollbar {
    width: 0.7em;
}

body::-webkit-scrollbar:hover {
    width: 0.9em; // Will be ignored
}

将设置关键帧规则的from值.但滚动条伪元素上的任何动画都不会播放.

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
}

body::-webkit-scrollbar-thumb:hover {
    -webkit-animation: scrollbig 1s;
}

// 0% = from,100% = to
@-webkit-keyframes scrollbig {
    0% {background: red;} // Scroll thumb is red
    1% {background: green;} // Will be ignored
    100% {background: blue;} // Will be ignored
}

过渡也被忽略.

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
    transition: background 2s; // Will be ignored
}

body::-webkit-scrollbar-thumb:hover {
    background: red; // Scroll thumb is red
}

原文链接：https://www.f2er.com/html/426136.html

html – 如何向滚动条添加额外的悬停效果

猜你在找的HTML相关文章