VUE模块滚动条实现鼠标进入显示，移除隐藏

H.F_0331

于 2020-06-30 16:20:22 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS3 文章标签： vue.js css

本文链接：https://blog.csdn.net/weixin_45660840/article/details/107044880

CSS3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Vue和CSS实现模块滚动条的效果，当鼠标悬停时显示滚动条，移开鼠标后自动隐藏。主要通过CSS的`:hover`伪类来控制滚动条的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE模块滚动条实现鼠标进入显示，移除隐藏

设置模块样式，overflow设置为hidden

.dper_table{
        margin-top: 18px;
        margin-bottom: 10px;
        height: 90%;
        overflow-y: hidden; //关闭滚动条
        overflow-x: hidden; //关闭滚动条
    }

给该模块样式设置伪类 :hover ，在伪类中设置需要悬浮显示的滚动条为auto

.dper_table:hover{
        overflow-y: auto;
    }

鼠标移除效果

在这里插入图片描述

鼠标移入效果

在这里插入图片描述