首页 > 开发 > CSS > 正文

使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧

2024-07-11 09:07:30
字体:
来源:转载
供稿:网友

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:
1.阻止用户的点击动作产生任何效果
2.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
一个CSS属性能做所有的这么多事情!

当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面。代码如下:

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表