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的基本知识以及 ...
随机推荐
- SEO优化之“不要轻易使用泛解析”
原文地址:http://www.chinaz.com/web/2007/0505/8077.shtml 半夜三更的突然想起这个老想提出或者大家都知道的问题! 先续在这里,之后给予全面补充! 什么是泛解 ...
- Ajax的课外了解
Ajax传入的数据的话,只能是字符串或数字,字段,其他形式的传参都不可以: Ajax只是跟后台交互也有同源策略的限制: 不是当前服务器叫跨域: Ajax也有同源策略的限制想做跨域处理,只能通过scri ...
- Vue + TypeScript + ElementUI 封装表头查询组件
前段时间有朋友私信我 Vue + TypeScript 的问题,然后就打算写一篇 Vue + TypeScript 封装组件的文章 正好公司项目中需要封装一个表头查询组件,就拿出来分享一下~ 组件的整 ...
- vue.js 的环境搭建
转自简书: https://www.jianshu.com/p/0c6678671635
- Linux线程池的实现
线程池的实现 1:自定义封装的条件变量 //condition.h #ifndef _CONDITION_H_ #define _CONDITION_H_ #include <pthread.h ...
- Distributed traceability with Spring Cloud: Sleuth and Zipkin
I. Sleuth 0. Concept Trace A set of spans that form a call tree structure, forms the trace of the re ...
- 基于拖放布局的 Twitter Bootstrap 网站生成器
简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够 ...
- javascript(面向对象，作用域，闭包，设计模式等)
javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...
- mySQL InnoDB 的性能问题讨论
https://ncisoft.iteye.com/blog/34676 https://www.douban.com/note/245895324/ MySQL最为人垢病的缺点就是缺乏事务的支持,M ...
- 安装hyperledger fabric V1.0.0-beta
安装文档位置: https://github.com/hyperledger/fabric fabric代码托管地址 https://hyperledger-fabric.readthedoc ...