巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件
2024-09-03 11:39:20
一直使用jQuery的hover()函数来写鼠标经过事件,这几天发现其他同行直接使用CSS就搞定了。自己在线下也试了试:
当然也并不是没有前提条件,需要配合一些定位属性来使用(position/top/left)。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.outer {
position: relative;
width: 150px;
}
.link {
padding: 0 18px;
height: 50px;
display: block;
z-index: 2;
background: #373d41;
border-right: 1px solid #2a2f32;
color: #fff;
font-size: 14px;
line-height: 50px;
text-decoration: none;
}
.link:hover {
background: #373d41
}
.appear-hide {
position: absolute;
top: 50px;
left: 0;
background: #ccc;
color: #000;
opacity: 0;
visibility: hidden;
}
.outer:hover .appear-hide {
opacity: 1;
visibility: visible;
}
.test {margin-top: 20px}
</style>
</head>
<body>
<div class="outer">
<a class="link" href="javascript:;">点击出现或隐藏</a>
<div class="appear-hide">
<p>CSS、CSS3</p>
<p>HTML、HTML5</p>
<p>JavaScript、ES6</p>
<p>HTTP协议</p>
<p>性能优化</p>
<p>一门后端语言</p>
<p>更好的方式写代码</p>
<p>线下开发和代码发布</p>
</div>
</div>
<div class="test">
<p>CSS、CSS3</p>
<p>HTML、HTML5</p>
<p>JavaScript、ES6</p>
<p>HTTP协议</p>
<p>性能优化</p>
<p>一门后端语言</p>
<p>更好的方式写代码</p>
<p>线下开发和代码发布</p>
</div>
</body>
</html>
- 至于为何要配合定位属性来使用,可先了解visibility属性:visibility 属性_w3cschool
- 另一属性opacity:opacity 属性_w3cschool,对于w3cschool上的有一地方没看明白,加了CSS后测试了下,发现.test的子元素p并没有继续其opacity属性值。
没看明白的地方:
添加的CSS代码:
.test {
margin-top: 20px;
opacity: 0.5;
}
子元素p并没有继续其opacity属性值:
然而这时有个小问题,鼠标放到链接元素上时再移动到类为.appear-hide的div上时,会发现还没移动到div下方它就隐藏了,就是鼠标放上去只能显示却不能对显示的div进行相应的点击等操作,这时解决的办法:
- 去掉.test的opacity属性或设置opacity:1;
- 如果不想更改.test的opacity属性值为1或去掉,那.outer值的z-index设置得比.test的大就行,这里.test的z-index属性没有设置,.outer属性值设置为1即可。
小结:当然这只是简单的鼠标经过显示事件,复杂一些的还是需要使用jQuery等来写。
最新文章
- 从2G到5G, 基站天线过去与未来
- Palindrome Number
- 天地图应用ArcGIS发布的服务
- TeXmacs - 所见即所得 - 专业排版软件
- iOS页面传值方式
- 跨应用Session共享
- ANR
- C语言运算符的优先级
- 【LeetCode题意分析&;解答】33. Search in Rotated Sorted Array
- Step by step guide to set up master and slave machines(转)
- 玩转微信小程序
- 40.Linux应用调试-使用gdb和gdbserver
- Lucene 03 - 什么是分词器 + 使用IK中文分词器
- log4j详细配置
- 【fork/join】java并发编程-fork/join示例
- Android 开发 AlarmManager 定时器
- VS2008下安装与配置DirectShow SDK 9.0 及 DirectShow AMCap改装的问题
- Elasticsearch 学习之不停止服务,完成升级重启维护操作
- c语言结构体链表
- Fix_And_Hold 使用及存在问题
热门文章
- [JLOI2010]冠军调查 BZOJ2768 最小割
- 微信小程序 WebSocket 使用非 443 端口连接
- [PowerShell]get data from Ini File
- 【转】JavaScript里Function函数实现可变参数
- java Pattern和Matcher完全解析
- Mybatis学习笔记(一) —— mybatis介绍
- Python语言、编译解释、动态库静态库、编译过程、头文件
- BestCoder Round #64 1002
- scanf()函数的注意事项
- my07_lock-tables与single-transaction的区别