[css] 举例说明pointer-events有什么实际用途？

haizhilin2013

2020-08-02 04:38:26 星期日

css

                    
                        
                                                            举例说明pointer-events有什么实际用途？

推荐题目

更多>

2 Comments Powered by GitHub & Vssue

Comments per page

< Page 1 / 1 >

rookieery 2020-08-03 10:55:59

在CSS里的z-index覆盖层叠，如果需求是点击时只触发被覆盖的元素的onclick事件，此时一个简单的方案就是给覆盖元素设置pointer-events：none。

0 0 0

luoheix 2020-08-05 06:06:49

1、全网置灰效果（全国哀悼）
2、全网添加水印效果（防侵权）

添加一个div，通过fixed和z-index使其覆盖到页面之上，添加pointer-events: none;鼠标穿透

.common { // 公共样式
 position: fixed;
  left: 0;
  top: 0;
  z-index: 9999; 
  width: 100%;
  height:100%;
  pointer-events: none; // 鼠标穿透，使其鼠标事件失效，直接点击到下面
}
.gray {  // 置灰效果
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}
.watermark { // 水印效果
  background: url(watermark.png) repeat;
}

0 2 0

排行榜

今日答题答题排行

未答的题

更多>

【关注作者公众号】以面试驱动学习--前端剑解

【公众号推荐】不折腾的前端和咸鱼有什么区别

学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布前端知识点（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！欢迎大家关注3+1开源项目！希望大家每人去学习与思考！（不要为了谁而来，要为自己而努力！）

【关注官方公众号】每天4:30-5:00推送

【公众号推荐】一起折腾前端算法

【微信学习群】备注3+1