巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件
一直使用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等来写。
巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件的更多相关文章
- python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
- CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...
- css属性编写顺序+mysql基本操作+html细节（个人笔记）
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- Transition 所支持的css属性
transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
随机推荐
- web安全-密码安全
web安全-密码安全 1.密码的作用 2.储存 3.传输 4.替代方案 5.生物特征密码 (指纹 人脸) 6.密码单向变换彩虹表 组合 密码变换次数越多越安全 加密成本几乎不变(生成密码速度慢一点) ...
- wamp配置apache虚拟主机支持多域名访问localhost
1.背景: 在进行网站开发的时候,通常需要以http://localhost或者127.0.0.1等地址来访问本地环境的网站.不过随着开发项目的增多,需要每次先访问localhost然后再选项目,显得 ...
- chrome插件-YSlow 一个使用的web性能测试插件
本文为转载是文章,如作者发现后不愿意,请联系我进行删除 原文链接:http://www.cnblogs.com/wajika/p/6278825.html YSlow的安装: 1.安装 firebug ...
- [SCOI2010]序列操作 BZOJ1858 线段树
题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a b ...
- maven profile启动项目
- HDU 4352 区间的有多少个数字满足数字的每一位上的数组成的最长递增子序列为K（数位DP+LIS）
题目:区间的有多少个数字满足数字的每一位上的数组成的最长递增子序列为K 思路:用dp[i][state][j]表示到第i位状态为state,最长上升序列的长度为k的方案数.那么只要模拟nlogn写法的 ...
- python--selectors模块
它的功能与linux的epoll,还是select模块,poll等类似:实现高效的I/O multiplexing, 常用于非阻塞的socket的编程中: 简单介绍一下这个模块,更多内容查看 pyt ...
- windows下安装TensorFlow（CPU版）
建议先到anaconda官网下载最新windows版的anaconda3.6,然后按步骤进行安装.(这里我就不贴图了,自己下吧) 1.准备安装包 http://www.lfd.uci.edu/~goh ...
- acm之奇葩数据输入专题
1.每組测试数据都在一行,不知道每组测试数据的长度,以换行为测试数据输入的结束 关键代码:if (cin.get() == '\n') {语句} 例如:找出每组测试的最大值: 输入: 3 1 4 ...
- thinkphp Model的使用
4.1 放在哪儿?项目/模块/Model目录下以本教程为例,Home模块的Model/Home/Model/目录下 4.2 model类文件叫什么?模型名: DemoModel.class.php 4 ...