Css 仅当将 Div 悬停在上方时才显示滚动条

发布于12月26日

我正在努力想办法让一个可滚动的div在悬停时只显示滚动条.

例如谷歌图片搜索，在下面的图片中，你可以看到左侧边栏在鼠标悬停在上面之前是无法滚动的.

这在CSS中是可能的还是需要Javascript？如果可能的话，可以举一个简单的例子来说明如何完成这样的任务？

推荐答案

div {
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
}

div:hover {
  overflow-y: scroll;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

这样的东西行得通吗？