设置鼠标移动上去列表显示滚动条

最新推荐文章于 2024-05-29 16:35:43 发布

瘦瘦瘦大人

最新推荐文章于 2024-05-29 16:35:43 发布

阅读量1.6k

点赞数

分类专栏：前端HTML+CSS 文章标签： html5 javascript css html

本文链接：https://blog.csdn.net/qq_37380802/article/details/109242488

版权

前端HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

设置鼠标移动上去列表显示滚动条

有一个很坑的就是没有hover之前列表要设置overflow:hidden，否则鼠标移动上去之后就会滚动回到刚刚开始的位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .list,
  .list-item {
    width: 100px;
    /* 新增代码，只要把这两个元素设置成同一宽度即可 */
  }

  .list {
    width: 100px;
    height: 200px;
    overflow: hidden;
    border: 1px solid blue;
    padding-right: 20px;
    /* 防止滚动条遮挡内容 */
  }

  .list:hover {
    overflow-y: auto;
  }
</style>

<body>
  <div class="list">
    <div class="list-item">1测试列表测试列表测试列表</div>
    <div class="list-item">2测试列表测试列表测试列表</div>
    <div class="list-item">3测试列表测试列表测试列表</div>
    <div class="list-item">4测试列表测试列表测试列表</div>
    <div class="list-item">5测试列表测试列表测试列表</div>
    <div class="list-item">6测试列表测试列表测试列表</div>
    <div class="list-item">7测试列表测试列表测试列表</div>
    <div class="list-item">8测试列表测试列表测试列表</div>
    <div class="list-item">9测试列表测试列表测试列表</div>
    <div class="list-item">测试列表测试列表测试列表</div>
    <div class="list-item">测试列表测试列表测试列表</div>
  </div>
</body>

</html>

瘦瘦瘦大人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
设置鼠标移动上去列表显示滚动条

设置鼠标移动上去列表显示滚动条有一个很坑的就是没有hover之前列表要设置overflow:hidden，否则鼠标移动上去之后就会滚动回到刚刚开始的位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫