css 的pointer-events 属性
1.css 有好多属性，可以让你感觉到不可思议，关键是可以解决一些难以实现的问题，今天遇到一个，就是 point-enevts属性
支持 pointer-events 属性 的浏览器版本
2. 1 point-events 属性的效果：
2.1.1 阻止点击事件的效果
2.1.2 阻止鼠标指针的显示
2.1.3 阻止css 里因为hover 和active 状态的改变而触发的事件
2.1.4 穿透上层元素，实现下层元素的选中效果
阻止点击事件的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
text-decoration: none;
}
span {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="https://www.tmall.com/">天猫，这是一个可以点击的链接</a></li>
<p><span>鼠标手型效果</span></p>
</div>
</body>
</html>
运行效果：1. 鼠标移到百度，天猫，鼠标手型上 都会有一个手型效果
改变css 样式：
<style>
a {
text-decoration: none;
}
a[href="https://www.tmall.com/"] {
pointer-events: none;
}
span {
cursor: pointer;
}
</style>
运行效果：a 标签的默认手型效果没有，点击默认跳转也没有了
2.2 使用point-events 属性，解除元素的hover效果：
改变css 样式：增加一个 hover 效果
<style>
a {
text-decoration: none;
}
a[href="https://www.tmall.com/"] {
pointer-events: none;
}
span {
cursor: pointer;
}
p {
background: #ccc;
}
p:hover {
background: #f00;
}
</style>
使用 pointer-events 改变 hover 效果
<style>
a {
text-decoration: none;
}
a[href="https://www.tmall.com/"] {
pointer-events: none;
}
span {
cursor: pointer;
}
p {
/* 这个是改变hover 的代码 */
pointer-events: none;
}
p {
background: #ccc;
}
p:hover {
background: #f00;
}
</style>
2.3 pointer-events属性改变点击事件的效果：（阻止点击事件）
初始状态：
<style>
a {
text-decoration: none;
}
a[href="https://www.tmall.com/"] {
pointer-events: none;
}
span {
cursor: pointer;
}
.active {
background: blue;
}
</style>
<script>
window.onload = function() {
$('p>span').on('click', function() {
$('p').toggleClass("active");
});
}
</script>
运行效果：
加入 pointer-events ：none 属性改变效果
<style>
a {
text-decoration: none;
}
a[href="https://www.tmall.com/"] {
pointer-events: none;
}
p {
/* 阻止改变点击事件的效果，连同阻止子元素的点击事件的效果 */
pointer-events: none;
}
span {
cursor: pointer;
}
.active {
background: blue;
}
</style>
运行结果：
2.4 穿透上层元素，直接作用域下层元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
span {
color: red;
}
p {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 300px;
background: #000;
opacity: 0.5;
padding-top: 100px;
}
</style>
</head>
<body>
<div>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="https://www.tmall.com/">天猫，这是一个可以点击的链接</a></li>
<p><span>鼠标手型效果</span></p>
</div>
</body>
</html>
运行结果：鼠标移到a标签上方，没有效果，不会变成手型，点击也没有作用
加入pointer-events:none 透视 p 元素：
<style>
* {
margin: 0;
padding: 0;
}
span {
color: red;
}
p {
/* 加入pointer-events属性透视p 元素 */
pointer-events: none;
}
p {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 300px;
background: #000;
opacity: 0.5;
padding-top: 100px;
}
</style>
运行结果：直接透视p元素，可以点击li 下面的a 标签，同时可以正常运行跳转：
鼠标移动a标签上方，鼠标会变成手型，点击后会实现a连接的跳转
css 的pointer-events 属性的更多相关文章
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4
6 鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...
- css的五种属性值----在路上（21）
在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
随机推荐
- OpenVZ管理
查找内存超过5%,CPU超过10% CPU=${:-} MEM=${:-} for CTID in `vzlist|sed '1d'|awk '{print $1}'` { echo "== ...
- 标准C库函数
标准库函数由15个头文件组成 1.math.h 1.1 绝对值函数 1.2 幂函数.开平方函数 1.3 指数函数.对数函数 1.5 三角函数 注意参数范围: 1.6 取整函数.取余函数 2.字符串处理 ...
- is与==
is和==的区别 1. id() 通过id()我们可以查看到⼀一个变量表示的值在内存中的地址. a1 = 100 b1 = 100 print(id(a1),id(b1)) #14071247240 ...
- Centos 7 下, 安装odoo 10
1. Centos在虚拟机中, 最小化安装, 网络连接选择的是 桥接模式, 安装完成后, 是不能直接上网的, 输入root 和密码, 登录进去, 然后执行: [root@localhost ~]# v ...
- sas基础系列（3）-表格标颜色示例
以下代码可以直接在SAS执行查看效果 ods path reset;ods path show;ods html close;options nodate;ods pdf file="Pro ...
- HibernateUtil工具类的使用
为了简化代码的重复性,使用HibernateUtil工具类对Hibernate有关的代码进行整合 主要实现有,getSessionFactory(),getSession(),closeSession ...
- scala语法在spark withScope上的应用
withSpout在spark中是用来做DAG可视化的,它在代码里的用法如下(以map为例,spark 2.0.0版本) def map[U: ClassTag](f: T => U): RDD ...
- Struts2 --简单留言系统
1.创建数据表,与servlet中相同 2.创建web项目,添加struts2模块,url 选 /*,web.xml中会自动注册struts2,同时src下会自动生成struts2配置文件struts ...
- Ambari集群的搭建（离线安装）
我们先克隆几台机器 我们打开克隆出来的机器 我们先把主机名修改一下 我们把主机名改成am2 下一步我们来配置网卡 把原来的eth0的注释掉,把现在的eth1改成eth0,同时把mac地址记下来 保存退 ...
- call与apply简单介绍
var pet={ word:'...', speak:function(say){ console.log(say+' '+this.word) } } //pet.speak('speak')// ...