This is an explanation of the video content.
 Everything to games
Spanning time and space ...
...
49

 |   | 

CSS实现鼠标悬停滚动条，滚动条放大

index.css

我们使用一个包含内容的滚动容器 .scroll-container。然后使用 ::after 伪类创建了一个垂直滚动条，并设置了适当的样式。当鼠标悬停在滚动容器上时，滚动条的透明度设置为1，使其可见。

下面代码中使用了 -webkit-scrollbar-thumb 选择器，这是针对 WebKit 内核的浏览器（如 Chrome 和 Safari）的样式设置。如果你需要支持其他浏览器，你可能需要添加相应的浏览器前缀。

这只是一种实现鼠标悬停时滚动条放大效果的方法，你可以根据实际需求进行修改和扩展。

.scroll-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px; /* 滚动条宽度 */
  background-color: #ccc; /* 滚动条颜色 */
  opacity: 0; /* 初始时透明 */
  transition: opacity 0.3s ease; /* 过渡效果 */
}

.scroll-container:hover::after {
  opacity: 1; /* 鼠标悬停时显示滚动条 */
}

.scroll-container:hover::-webkit-scrollbar-thumb {
  background-color: #888; /* 鼠标悬停时滚动条的颜色 */
}

index.html

在HTML中应用的完整代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .scroll-container {
      overflow: auto;
      width: 200px; /* 设置适当的宽度 */
      height: 300px; /* 设置适当的高度 */
      position: relative;
    }

    .scroll-container::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 8px; /* 滚动条宽度 */
      background-color: #ccc; /* 滚动条颜色 */
      opacity: 0; /* 初始时透明 */
      transition: opacity 0.3s ease; /* 过渡效果 */
    }

    .scroll-container:hover::after {
      opacity: 1; /* 鼠标悬停时显示滚动条 */
    }

    .scroll-container:hover::-webkit-scrollbar-thumb {
      background-color: #888; /* 鼠标悬停时滚动条的颜色 */
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="content">
      <!-- 内容 -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat elit at finibus rhoncus. Phasellus gravida, turpis nec laoreet aliquet, urna mi congue lacus, sit amet finibus tortor risus at justo. Maecenas pulvinar nisi in mi sagittis, a euismod sem dictum.</p>
      <p>Fusce convallis tempus mi, eget sagittis purus. Aliquam erat volutpat. Praesent sed nunc vitae lorem porttitor scelerisque. Ut ut tortor lacus. Suspendisse potenti. Pellentesque tincidunt, tellus eu aliquet ultricies, orci felis facilisis neque, sed vulputate odio ante in justo.</p>
      <p>Nunc sed nibh nec turpis volutpat tristique. Suspendisse pellentesque, ex id scelerisque blandit, lacus lorem convallis erat, vitae tincidunt orci urna nec ex. Suspendisse potenti. Donec at urna ac purus bibendum interdum. Cras ultrices massa ac venenatis faucibus.</p>
      <p>Etiam molestie purus id nisi sagittis tempus. Nullam porttitor tortor ac diam tempus, suscipit auctor dolor egestas. Sed vitae rhoncus purus, non dapibus tortor. Aenean tempor feugiat mi, nec volutpat orci consequat ac. Morbi sit amet semper sem. Duis rutrum consequat justo non volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean pellentesque porta metus, a maximus neque pretium nec. </p>
    </div>
  </div>
</body>
</html>

49 🌐Frontend ↦ CSS开发技巧 __ 341 字
 CSS开发技巧 #1