鼠标悬停显示滚动条，移出不显示

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>鼠标移入显示滚动条，移出不显示</title><style>.items {width: 240px;height: 150px;overflow: hidden;}.items:hover {overflow: auto;}.items::-webkit-scrollbar {width: 4px;border-radius: 4px;background-color: #f5f5f5;border: 1px solid #c5c5c5;}.items::-webkit-scrollbar-thumb {width: 10px;border: 1px solid #f5f5f5;border-radius: 10px;border: 1px solid #c5c5c5;box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);}</style></head><body><div class="items"><ul><li>及时更换车轮履带</li><li>发动机检查维护</li><li>及时更换车轮履带</li><li>发动机检查维护</li><li>及时更换车轮履带</li><li>发动机检查维护</li><li>及时更换车轮履带</li><li>发动机检查维护</li><li>及时更换车轮履带</li><li>发动机检查维护</li><li>及时更换车轮履带</li><li>发动机检查维护</li></ul></div></body>
</html>

效果如图所示：

使用::-webkit-scrollbar CSS伪类选择器来美化滚动条样式的一些解释说明：
::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

鼠标悬停显示滚动条，移出不显示相关推荐

html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容
首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = {tooltip: {trigger: 'it ...
html鼠标悬停图片释义文字消失,鼠标悬停，在图片上显示文字~
面向对象 function $(id){return typeof id === "string" ? document.getElementById(id) : id;} fun ...
JS文字过长隐藏，鼠标悬停显示
目录原生JS的处理办法 vue下的处理办法原生JS的处理办法此部分转载自链接: js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示. 以下展示最简单的办法,转载的原文还另举了一种onload ...
Html —— 显示滚动条
问题如何在Html中显示滚动条? 解决是否显示滚动条依赖于两个条件 1.当前长度已经大于设置长度 2.已配置滚动条代码 //需要配置y轴滚动条的class.a-b-c {//最大高度max-he ...
php中scrolling,如何设置浮动框架是否显示滚动条scrolling？
在上篇文章中,我们了解了iframe是什么意思啊?浮动框架iframe详解,然而很多人不知道如何设置浮动框架是否显示滚动条scrolling?下面我们来讲解一下scrolling 属性? 一:什么是s ...
span标签的鼠标滑入提示_html鼠标悬停提示文字 div a span均适用
扩展阅读学习�?/strong>�?a href="//www.css5.com.cn/html/939.shtml" class="blue">h ...
WinForm实现鼠标悬停显示控件
WinForm实现鼠标悬停显示控件在某些需频繁操作的环节中,为提高效率.减少劳动,可以在操作细节上下功夫,以带来更好的用户体验. 今天介绍的鼠标悬停显示功能就是一例,看似仅仅节省了一次点击,实则在繁 ...
HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层
$(document).ready(function(){ $("#div1").hide(); //先将层隐藏起来 var canHide = false; //标记是否可隐 ...

鼠标悬停显示滚动条，移出不显示

鼠标悬停显示滚动条，移出不显示

鼠标悬停显示滚动条，移出不显示相关推荐

最新文章

热门文章