鼠标移入时显示滚动条

派大星1

已于 2022-10-17 15:37:16 修改

阅读量2.5k

点赞数 1

文章标签： css css3 html

于 2021-03-31 17:56:35 首次发布

本文链接：https://blog.csdn.net/yin_you_yu/article/details/115356617

版权

CSS 滚动条 hover 过渡效果自定义样式

关键词由CSDN通过智能技术生成

<!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 {
    height: 30px;
    line-height: 30px;
    width: 500px;
    margin: 0 auto;
    height: 200px;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 10px;
    transition: all 0.3s;
  }

.list:hover{
  overflow: auto;
}

  
::-webkit-scrollbar
{
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
  background   : #666;
  transition: background 1s;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background   : #ededed;
}

</style>

<body>
  <div class="list">
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
    <div class="list-item">item</div>
  </div>
</body>

</html>

打工者联盟为了抵抗996、拖欠工资、黑心老板、恶心公司，让我们组成打工者联盟。客观评价自己任职过的公司情况，为其他求职者竖起一座引路的明灯。https://book.employleague.cn/