css

            .nui-scroll {
margin-left: 100px;
border: 1px solid #000;
width: 200px;
height: 100px;
overflow: auto;
} .nui-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*正常情况下滑块的样式*/ .nui-scroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .05);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/ .nui-scroll:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在滑块上时滑块的样式*/ .nui-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*正常时候的主干部分*/ .nui-scroll::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/ .nui-scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
background-color: rgba(0, 0, 0, .01);
}
 
       <div class="nui-scroll"><br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<br/> 123
<!--这里有好多上面这结构为了节省篇幅就省去了-->
</div>
     
 
效果图
 

css 给div 添加滚动条样式hover 效果的更多相关文章

  1. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  2. DIV 自定义滚动条样式

    当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...

  3. div添加滚动条常见属性

    由于页面上的表里的末一列的内容太多,显示的内容不美观了,就想在这一列上加滚动条,在网上搜了一下,用div可以实现,感觉还不错,下面的是在网上查到的.  想在div里添加滚动条设置一下style就ok了 ...

  4. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  5. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

  6. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  7. DIV 自定义滚动条样式(二)

    流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主 ...

  8. react组件配置样式hover效果的实现

    需求 react 自定义一个组件,组件内部样式可以灵活配置 问题 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现 ...

  9. CSS八种让人眼前一亮的HOVER效果

    一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...

随机推荐

  1. 洛谷 - P1162 - 填涂颜色 - 简单搜索

    https://www.luogu.org/problemnew/show/P1162 在外面加一圈0把0连起来,然后把所有0换成2,再从(0,0)把连通的2全部改回来. 这也是一个判断内外圈的好办法 ...

  2. hdoj1394

    题意还告诉我们是0-n-1之间的数,那么我们每次把一个数放到后面去,求一下比他大的,还有比他小的: 比如: 1 3 6 9 0 8 5 7 4 2 逆序数num:22 3 6 9 0 8 5 7 4 ...

  3. bzoj 1090: [SCOI2003]字符串折叠【区间dp】

    设f[i][j]为区间(i,j)的最短长度,然后转移的话一个是f[i][j]=min(j-i+1,f[i][k]+f[k+1][j]),还有就是把(k+1,j)合并到(i,k)上,需要判断一下字符串相 ...

  4. P4171 [JSOI2010]满汉全席(2-SAT)

    传送门 2-SAT裸题 把每一道菜拆成两个点分别表示用汉式或满式 连边可以参考板子->这里 然后最尴尬的是我没发现$n<=100$然后化成整数的时候只考虑了$s[1]$结果炸掉了2333 ...

  5. 第五篇 .NET高级技术之CTS、CLS、CLR

    CTS.CLS.CLR 1. .Net平台下不只有C#语言,还有VB.Net.F#等语言.IL是程序最终编译的可以执行的二进制代码(托管代码),不同的语言最终都编译成标准的IL(中间语言,MSIL): ...

  6. 洛谷 P3400 仓鼠窝

    卡常 #pragma GCC optimize(2) #include<cstdio> #include<algorithm> #include<cstring> ...

  7. Win10 Hyper-v 中安装 CentOS 搭建开发环境

    Windows 环境 操作系统:Windows 10 开发环境:VS2005(需启动.NET Framework 3.5 ,才能正常安装使用)  Linux 环境 发行版:CentOS 7_x64 安 ...

  8. Super Mario 树状数组离线 || 线段树

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. cmd命令下执行jar包程序

     在cmd中使用指令来执行jar包 概述: 今天有一个需求,要在cmd中执行.jar文件 实践: 1.新建你的Hello world 2.导出到jar包 3.打开你的成功导出的jar包 4.打开文件夹 ...

  10. requirejs&&springboot

    1.Spring Boot Spring boot 基础结构主要有三个文件夹: (1)src/main/java  程序开发以及主程序入口 (2)src/main/resources 配置文件 (3) ...