能否为-webkit-scrollbar使用:hover伪类实现鼠标悬停显示滚动条？

你的代码存在两个关键问题导致鼠标 hover 时滚动条无法正常显示：

• overflow-x:none 是无效的 CSS 属性值，正确写法应为 overflow-x:hidden
• 仅设置 ::-webkit-scrollbar{display:block} 不足以让滚动条显现，WebKit 滚动条默认没有指定宽度、高度等基础样式，必须显式定义这些属性才能让滚动条可见

修正后的完整代码如下：

CSS 代码 #

.myBox{
  width:100px;
  height:50px;
  border:1px solid black;
  overflow-y:scroll;
  overflow-x:hidden; /* 修正无效属性值 */
}

/* 初始隐藏滚动条，同时定义滚动条基础样式 */
.myBox::-webkit-scrollbar{
  width: 6px; /* 定义垂直滚动条宽度 */
  display: none;
}
.myBox::-webkit-scrollbar-track{
  background: #f1f1f1; /* 滚动条轨道背景色 */
}
.myBox::-webkit-scrollbar-thumb{
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 3px;
}

/* hover 时显示滚动条 */
.myBox:hover::-webkit-scrollbar{
  display: block;
}

HTML 代码 #

<div class="myBox">
test<br>
test1<br>
test2<br>
test3<br>
test4<br>
</div> <!-- 修正未闭合的 div 标签 -->

另外注意你的原 HTML 代码中最后一个 <div> 标签未闭合，需改为 </div> 避免结构错误。

内容的提问来源于stack exchange，提问作者whitebear