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的基本知识以及 ...
随机推荐
- Linux下设置固定IP的方法
本文转自http://blog.163.com/liulina_517@126/blog/static/3766198320118231431594/ linux系统安装完,以后通过命令模式配置网卡I ...
- GO中DEFER的理解--DEFER执行的原理
在golang当中,defer代码块会在函数调用链表中增加一个函数调用.这个函数调用不是普通的函数调用,而是会在函数正常返回,也就是return之后添加一个函数调用.因此,defer通常用来释放函数内 ...
- [UE4]缓存选项 Is volatile
volatile:易变的,不稳定的; (液体或油) 易挥发的; 爆炸性的; 快活的,轻快的; UI中的Is Volatile选项:意思当前控件是容易变化的. 这个是一个性能上的优化. 默认情况下UI都 ...
- Version 版本定义规则
Version 定义规则:2.3.1012 主版本号: 表示项目的重大架构变更此版本号: 表示较大范围的功能添加和变化增量版本号: 一般表示重大bug修复2.3.1012snapshot 快照al ...
- 模拟select控件，css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
- day10学习笔记整理
函数对象函数是第一类对象: 指的是函数名指向的值(函数)可以被当作数据去使用 1. 可以被引用 2. 可以当作参数传给另外一个函数 3. 可以当作一个函数的返回值 4. 可以当作容器类型的元素 l ...
- shell中的时间值提取（date）
shell中的时间值提取(date) 方法1 # date +%F # date +%T # cat time.sh #!/bin/bash DATE=`date +%F | sed 's/-//g' ...
- linux系统上面使用tab补全命令
tab的模块脚本 [root@centos7 ~]# cat tab.py #!/usr/bin/python3.6 # python startup file import sys import r ...
- switch的穿透，是参数里包含case内容就执行。
package rom; import java.lang.*; /* * switch的穿透,是参数里包含case内容就执行. */ public class Xamle_5 { public st ...
- 5.2_k-means案例分析
k-means案例分析 手写数字数据上K-Means聚类的演示 from sklearn.metrics import silhouette_score from sklearn.cluste ...