首先我们来看看pointer-events属性的作用:

当在HTML元素上使用pointer-events属性时,它可以指定元素是否能响应鼠标(或触摸)事件。它可以用于防止单击、状态(CSS活动、焦点和悬停状态)和光标操作(例如,在链接上显示指针光标)。

你可以让元素响应指针事件(auto),或者阻止它执行此操作(none)。如果阻止它响应指针事件,则其下面的元素将成为这些事件的目标。如果单击该元素,则其下方的元素将接收该单击(click)事件。同样也适用于悬停和其他光标操作。例如,你可以选择位于元素下方的元素中的文本设置为pointer-events:none(请参考下面的示例)。

pointer-events属性在不同的场景中非常有用。此属性的一个优点是允许你使用pointer-events:none来创建60fps的滚动。

我们可以在子元素上使用(覆盖上)禁用元素的指针事件:如果元素的子元素上具有pointer-events:auto(即启用),则即使其父元素没有,它也将能够处理并响应单击(click)事件。

下面我们来看看pointer-events属性的示例:

在示例中,覆盖元素是定位在整个页面上的,叠加层设置了pointer-events:none,因此你可以选择文本并单击其下方的锚标记。还要注意当你将鼠标悬停在链接上时光标如何变成指针(手掌形状),因为悬停状态会触发它们。

HTML代码:

覆盖层

pointer在html作用,详解pointer-events属性的使用相关推荐

  1. VMware虚拟机文件夹中各文件作用详解

    VMware虚拟机文件夹中各文件作用详解 虚拟机的文件管理由VMware Workstation来执行. 一个虚拟机一般以一系列文件的形式储存在宿主机中, 这些文件一般在由workstation为虚拟 ...

  2. 饥荒海难机器人怎么用_饥荒海难机器人作用详解 机器人有什么用

    饥荒海难中有很多人物角色可以让玩家选择,其中机器人因为有其独特的玩法而受到了很多玩家的喜爱.对于那些没玩过机器人的玩家,可能会有疑问机器人好玩吗?下面就让小编向你简单介绍下机器人. 饥荒海难机器人好玩 ...

  3. python中文意思k-对python中的*args与**kwgs的含义与作用详解

    在定义函数的时候参数通常会使用 *args与**kwgs,形参与实参的区别不再赘述,我们来解释一下这两个的作用. *args是非关键字参数,用于元组,**kw是关键字参数 例如下面的代码 def fo ...

  4. 正则表达式中模式修正符作用详解(i、g、m、s、x、e)

    正则表达式中常用的模式修正符有i.g.m.s.x.e等.它们之间可以组合搭配使用. 它们的作用如下: //修正符:i 不区分大小写的匹配; //如:"/abc/i"可以与abc或a ...

  5. Xposed源码剖析——app_process作用详解

    Xposed源码剖析--app_process作用详解 首先吐槽一下CSDN的改版吧,发表这篇文章之前其实我已经将此篇文章写过了两三次了.就是发表不成功.而且CSDN将我的文章草稿也一带>删除掉 ...

  6. Linux(centos)系统各个目录的作用详解

    转自:Linux(centos)系统各个目录的作用详解 现在公司的服务器使用CentOS系统,在网上找到了这篇介绍linux各个目录的文章,觉得十分不错,所以拿来存个档. 整理之后如下: 文件系统的类 ...

  7. linux编译l和l区别,linux 下 g++编译程序时-I(大写i) 与-L(大写l)-l(小写l) 的作用详解...

    作为一个linux入门级使用者,gcc/g++的简单操作已经用过多次, 但是有时稍微复杂一点的程序就会使用到库.在遇到问题的时候我查了挺多前辈总结的资料,也留个脚本希望对朋友们有个帮助.如果也能处理你 ...

  8. Java开源项目Hibernate包作用详解

    Java开源项目Hibernate包作用详解 本文引自:http://hi.baidu.com/nick6610/blog/item/70b58afa0d0eab9259ee90f7.html Jav ...

  9. ip route 命令的作用详解

    ip route 命令的作用详解 route 命令里面的metric是做什么用的 metric Metric 为路由指定所需跃点数的整数值(范围是 1 ~ 9999),它用来在路由表里的多个路由中选择 ...

最新文章

  1. 链表问题12——将单链表的每K个节点之间逆序
  2. 编写你人生中第一个机器学习代码吧!
  3. X is not a member of 'cv'异常解决
  4. leetcode 349. Intersection of Two Arrays
  5. 好用的Eclipse 插件
  6. 用Navicat连接Oracle数据库时报错ORA-28547:connection to server failed, probable Oracle Net admin error...
  7. bzoj 5090 组题
  8. GridView实现自动编号
  9. 2-4 测试案例helloWorld
  10. AutoWare 使用
  11. java 爬虫_Java爬虫可以非常溜
  12. 609. 在系统中查找重复文件
  13. 基于STM32单片机设计指纹考勤机+上位机管理
  14. python输入一个三位数输出百位十位个位_编程实现:输入一个三位数,输出其百位、十位、个位上的数字。_学小易找答案...
  15. 如何远程连接计算机网络打印机,远程打印机共享怎么设置
  16. 名词变复数,动词第三人称, 过去式 读音
  17. python爬取头条视频_Python爬虫:爬取某日头条某瓜视频,有/无水印两种方法
  18. python牛顿环测量曲率半径
  19. 今日头条运营秘诀分享:让你的文章阅读量和收入都“飞”起来
  20. 护眼灯的标准是什么?护眼台灯国家标准给你答案

热门文章

  1. openstack compute service list报错(HTTP 503)
  2. 1.9G的视频被压缩为64K
  3. 安装计算机的显卡出现问题,电脑显卡驱动安装失败如何解决
  4. 没经验能做seo专员吗
  5. 5G/NR 标识详解之5G-GUTI
  6. 服务器文件防泄密系统,数据防泄密软件解决图纸泄密问题
  7. PPT学习整理(五)编辑顶点
  8. 如何压缩GIF/GIF压缩软件教程方法全面解析
  9. YYDS!迅雷的代码结构,竟然被大佬“扒了精光”!
  10. 移动通信核心网络技术总结(三)EPC网络的结构及原理