css 给div 添加滚动条样式hover 效果
.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 效果的更多相关文章
- css美化Div边框的样式实例*(转载)
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...
- div添加滚动条常见属性
由于页面上的表里的末一列的内容太多,显示的内容不美观了,就想在这一列上加滚动条,在网上搜了一下,用div可以实现,感觉还不错,下面的是在网上查到的. 想在div里添加滚动条设置一下style就ok了 ...
- CSS改变浏览器默认滚动条样式
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式 比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决 注:经测试,目 ...
- CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...
- css固定div头部 滚动条滚动内容
页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
- DIV 自定义滚动条样式(二)
流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主 ...
- react组件配置样式hover效果的实现
需求 react 自定义一个组件,组件内部样式可以灵活配置 问题 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现 ...
- CSS八种让人眼前一亮的HOVER效果
一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...
随机推荐
- 洛谷 - P1162 - 填涂颜色 - 简单搜索
https://www.luogu.org/problemnew/show/P1162 在外面加一圈0把0连起来,然后把所有0换成2,再从(0,0)把连通的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 ...
- 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)上,需要判断一下字符串相 ...
- P4171 [JSOI2010]满汉全席(2-SAT)
传送门 2-SAT裸题 把每一道菜拆成两个点分别表示用汉式或满式 连边可以参考板子->这里 然后最尴尬的是我没发现$n<=100$然后化成整数的时候只考虑了$s[1]$结果炸掉了2333 ...
- 第五篇 .NET高级技术之CTS、CLS、CLR
CTS.CLS.CLR 1. .Net平台下不只有C#语言,还有VB.Net.F#等语言.IL是程序最终编译的可以执行的二进制代码(托管代码),不同的语言最终都编译成标准的IL(中间语言,MSIL): ...
- 洛谷 P3400 仓鼠窝
卡常 #pragma GCC optimize(2) #include<cstdio> #include<algorithm> #include<cstring> ...
- Win10 Hyper-v 中安装 CentOS 搭建开发环境
Windows 环境 操作系统:Windows 10 开发环境:VS2005(需启动.NET Framework 3.5 ,才能正常安装使用) Linux 环境 发行版:CentOS 7_x64 安 ...
- Super Mario 树状数组离线 || 线段树
Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- cmd命令下执行jar包程序
在cmd中使用指令来执行jar包 概述: 今天有一个需求,要在cmd中执行.jar文件 实践: 1.新建你的Hello world 2.导出到jar包 3.打开你的成功导出的jar包 4.打开文件夹 ...
- requirejs&&springboot
1.Spring Boot Spring boot 基础结构主要有三个文件夹: (1)src/main/java 程序开发以及主程序入口 (2)src/main/resources 配置文件 (3) ...