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 的属性无疑会很简单。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

7806
来自专栏听雨堂

页面布局的一些心得

关于表格: 1. 表格用于控制大的板块比较好,居中很方便。同行同列等相对位置不会错乱。 2. 表格难于精确控制,由于历史长,表格属性,css等都能控制,也容易混...

1855
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

2899
来自专栏腾讯NEXT学位

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

39610
来自专栏肖蕾的博客

第十四章:TouchPadTouchPadStyleTouchPad控件

API定义:TouchPad的样式 用法:public TouchpadStyle(Drawable background, Drawable knob) ...

682
来自专栏码洞

人生苦短我用Python?No!学习Python的真正理由其实是

作者:gashero 链接:https://www.zhihu.com/question/282875062/answer/441546530

621
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

2495
来自专栏Android知识点总结

D5-Android绘图之让图形动起来

962
来自专栏web编程技术分享

js常用方法和一些封装(2) -- 随机数生成

33610
来自专栏前端笔记

【 图形游戏 Tetris 】原生 JavaScript 做小游戏

俄罗斯方块 (俄罗斯开发经典游戏) 游戏简介 《俄罗斯方块》(Tetris, 俄文:Тетрис)是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲...

34210

扫码关注云+社区