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

发布时间：2020-12-14 22:56:13 所属栏目：资源来源：网络整理

导读：在我的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

在我的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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!