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的基本知识以及 ...
随机推荐
- 个人知识管理PKM：收集、消化、应用、创新
个人知识管理PKM:收集.消化.应用.创新 准备工作1.制作知识分类体系(在线博客分类.本地 ...
- RedHat使用Centos的yum仓库
RedHat使用Centos的yum仓库 卸载红帽yum源 [root@zhouwanchun ~]# rpm -qa | grep yum [root@zhouwanchun ~]# rpm -e ...
- 将本地代码提交至gitHub
1.注册github账号 2.本地安装git 3.打开需要提交代码的目录 4.右击git bash here 5. $ git init 6 $ ssh-keygen -t rsa -C " ...
- sqoop导出mysql数据进入hive错误
看mr的运行显示:sqoop job可以获得的select max(xxx)结果,但是当mr开始时却显示大片错误,就是连接超时,和连接重置等问题, 最后去每个节点ping mysql的ip地址,发现 ...
- Kettle性能调优汇总
性能调优在整个工程中是非常重要的,也是非常有必要的.但有的时候我们往往都不知道如何对性能进行调优.其实性能调优主要分两个方面:一方面是硬件调优,一方面是软件调优.本章主要是介绍Kettle的性能优 ...
- update 中实现子查询
mysql 在update中实现子查询的方式 当使用mysql条件更新时--最先让人想到的写法 UPDATE buyer SET is_seller=1 WHERE uid IN (SELECT ...
- .NET MVC同页面显示从不同数据库（mssql、mysql）的数据
控制器: private readonly VipViewModel _model = new VipViewModel(); public static string Msg;// GET: Sys ...
- 常见排序算法 - Java实现
1.冒泡排序 每次比较相邻的两个元素大小,调整顺序.从头到尾执行一轮(i),最大数值的元素就排到最后.每次从头到尾执行一轮,都会排好一个元素(length - i - 1).这就是说一个包含 n 个元 ...
- django, tornado
django 由多线程写的 tornaod 由epoll机制
- [Unity插件]Lua行为树(十)：通用行为和通用条件节点
在行为树中,需要扩展的主要是行为节点和条件节点.一般来说,每当要创建一个节点时,就要新建一个节点文件.而对于一些简单的行为节点和条件节点,为了去掉新建文件的过程,可以写一个通用版本的行为节点和条件节点 ...