CSS 仅在鼠标悬停在div上时显示滚动条

在本文中，我们将介绍如何使用CSS控制在鼠标悬停在div上时显示滚动条的效果。通过这种方法，您可以增强用户体验，并将滚动条隐藏在div未被激活时。

阅读更多：CSS 教程

方法一：使用overflow属性

我们可以使用CSS的overflow属性来控制滚动条的显示。首先，我们将在HTML中创建一个包含内容较多的div元素，然后使用CSS将其样式设置为滚动显示。接下来，我们将使用:hover伪类选择器将滚动条进行隐藏，只有当鼠标悬停在div上时才显示滚动条。

示例如下：

<div class="scrollable-div">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mauris vitae erat consequat auctor eu in elit.</p>
  <p>Aenean congue, est quis tincidunt scelerisque, tellus sem placerat elit, sed vestibulum quam turpis ac ligula. </p>
  <p>Maecenas est neque, porttitor at varius eget, egestas maximus nisi. In hac habitasse platea dictumst.</p>
  <p>Proin venenatis orci dapibus metus faucibus fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</div>

.scrollable-div {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.scrollable-div:hover {
  overflow: auto;
}

上述示例中，我们创建了一个宽度为300像素、高度为200像素的div容器。在初始状态下，我们将overflow属性设置为hidden，即隐藏滚动条。当鼠标悬停在div上时，使用:hover伪类选择器，将overflow属性设置为auto，滚动条将显示出来。

方法二：使用滚动伪类

除了使用overflow属性，我们还可以使用CSS的滚动伪类来控制滚动条的显示。滚动伪类可以监视滚动容器是否处于滚动状态，并根据需要显示滚动条。

示例如下：

<div class="scrollable-div">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mauris vitae erat consequat auctor eu in elit.</p>
  <p>Aenean congue, est quis tincidunt scelerisque, tellus sem placerat elit, sed vestibulum quam turpis ac ligula. </p>
  <p>Maecenas est neque, porttitor at varius eget, egestas maximus nisi. In hac habitasse platea dictumst.</p>
  <p>Proin venenatis orci dapibus metus faucibus fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</div>

.scrollable-div {
  width: 300px;
  height: 200px;
  overflow: auto;
}

.scrollable-div::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

.scrollable-div::-webkit-scrollbar-thumb {
  background-color: #000000;
}

.scrollable-div::-webkit-scrollbar-thumb:hover {
  background-color: #555555;
}

在上述示例中，我们同样创建了一个宽度为300像素、高度为200像素的div容器，使用overflow属性将滚动条显示出来。接下来，我们通过设置滚动伪类来自定义滚动条的样式。::-webkit-scrollbar用于设置滚动条本身的样式，::-webkit-scrollbar-thumb用于设置滚动条的滑块样式。我们可以根据需要调整这两个属性的值，以达到滚动条的显示效果。