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的基本知识以及 ...
随机推荐
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...
- linux下的进程信息管理
- [SQL]用SQL语句断开某个数据库的所有活动连接
USE master go IF EXISTS ( SELECT * FROM dbo.sysobjects WHERE id = OBJECT_ID(N'[dbo].[P_KillConnectio ...
- maven入门安装及HelloWorld实现
一.安装maven 1.下载 https://maven.apache.org/download.cgi 官网进行下载 2.安装 2.1 解压 本人在D盘建立一个maven文件夹,然后 ...
- OpenStack各组件逻辑关系、通信部署关系及工作流程
一. OpenStack组件之间的逻辑关系 OpenStack 是一个不断发展的系统,所以 OpenStack 的架构是演进的,举个例子: E 版本有5个组件 Compute 是 Nova:Imag ...
- python 之 json 与pickle 模块
序例化:将对象转换为可通过网络传输或可以存储到本地磁盘的数据格式(如:XML.JSON或特定格式的字节串)的过程称为序列化:反之,则称为反序列化. 1.[JSON] import json dic={ ...
- linux&php：ubuntu安装php-7.2
1.下载php源码,地址:http://www.php.net/downloads.php 这里下载的是tar.gz的包 2.解压安装 将安装包解压到/usr/local/php 安装C的编译工具 s ...
- github提交代码后没有contribution问题
好气啊,好几天的代码提交后发现没有contribution,强迫症表示不能忍,仔细排查了下原因 可能有以下几个原因 1.提交代码的用户名和邮箱和账号不符合 方法1:git命令行设置用户名和邮箱 git ...
- 29.如何不用 transition 和 animation 也能做网页动画
原文地址:https://segmentfault.com/a/1190000014964220 感想:动画效果运用了具有滚动效果的marquee标签 HTML代码: 注释: <!-- mar ...
- 省市区联动JS脚本
省市区联动JS脚本 /* ***说明:省市区联动JS脚本 ***作者:Jerry Yuan */ var province=[{id:0,name:'选择省'},{id:11,name:" ...