CSS 特殊属性介绍之 pointer-events
首先看一下 MDN 上关于 pointer-events 的介绍:
CSS属性
pointer-events
允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时,SVG 内容表现如同visiblePainted
。 除了指定元素不成为鼠标事件的目标,none
值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。
官方的中文翻译比较文艺,要多读几遍才能明白什么意思。
pointer-events 主要的用途还是穿透元素。直接看下面的示例。
示例
创建两个 div 元素,在每个 div 元素上面添加一个遮罩层,其中的文字被盖住了。为了显得有文艺范,div 中的内容引用了莎士比亚的十四行诗。正常情况如下,因为 div 上面有遮罩层,所以无法选中文字。
Shall I compare thee to a summer's day? Thou art more lovely and more temperate: Rough winds do shake the darling buds of May, And summer's lease hath all too short a date: Sometime too hot the eye of heaven shines, And often is his gold complexion dimm'd; And every fair from fair sometime declines, By chance or nature's changing course untrimm'd; But thy eternal summer shall not fade Nor lose possession of that fair thou owest; Nor shall Death brag thou wander'st in his shade, When in eternal lines to time thou growest: So long as men can breathe or eyes can see, So long lives this and this gives life to thee.
添加 pointer-events: none 之后,就可以穿透遮罩层顺利拷贝文字了。
我想将你比作迷人的夏日, 但汝却更显可爱和温存: 狂野之风摧残着五月蓓蕾的柔媚, 也一天天消逝着夏日的归期: 苍天的明眸偶然泻出璀璨, 却难以辉映他暗淡的容颜; 一切明媚的色彩渐已消褪, 过程是如此苍白; 然而你却如永恒之夏, 所有的美好永远也不会改变; 就连死神也不敢对你嚣张, 因你将永生于不朽的诗篇: 只要世人一息尚存, 你将和这诗篇永驻人间。
总结
除了常用的 pointer-events: none 之外,还有很多其他参数。关于 pointer-events 详细介绍可以参考 MDN 上的内容。工作当中有很多应用场景,比如一些可以点击的商品图片,如果设计师在图片上设计了遮罩层,那使用 pointer-events 的属性无疑会很简单。
- Logistic回归实战篇之预测病马死亡率(二)
- Windows环境下跑通Truffle开发环境
- Logistic回归实战篇之预测病马死亡率(三)
- 如何将finecms链接URL中的list和show去掉
- Solidity语法知识点(文末有彩蛋)
- 人脸Haar特征与快速计算神器:积分图
- 内存为王:DBIM RAC Share Nothing架构的挑战和解决方案
- 调用finecms栏目多图怎么实现
- phpcms调用子栏目名称/文章怎么操作
- 小程序开发工具全新上线 附下载地址和教程
- JS页面跳转代码怎么写?总结了5种方法
- finecms如何控制调用子栏目的数量
- finecms如何调用多个指定栏目的内容
- finecms同时调用子栏目和子栏目的文章怎么操作
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 浅析Python 简单工厂模式和工厂方法模式的优缺点
- thinkPHP利用ajax异步上传图片并显示、删除的示例
- 对python中list的五种查找方法说明
- Laravel框架查询构造器简单示例
- PHP调用微博接口实现微博登录的方法示例
- Python使用pyexecjs代码案例解析
- PHP抽象类与接口的区别实例详解
- laravel获取不到session的三种解决办法【推荐】
- php封装的pdo数据库操作工具类与用法示例
- 利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
- PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
- Python基于正则表达式实现计算器功能
- python利用os模块编写文件复制功能——copy()函数用法
- 解决python 虚拟环境删除包无法加载的问题
- Laravel框架路由管理简单示例