css 点击穿透 pointer-events: none；一般用于遮罩

最新推荐文章于 2025-06-03 09:01:04 发布

MrLi-2018

最新推荐文章于 2025-06-03 09:01:04 发布

阅读量7.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_42729938/article/details/123902027

本文介绍了如何在CSS中使用pointer-events:none属性，使得遮罩层不阻止元素的点击事件，同时保持遮罩效果。通过实例演示了如何在<div class='demo'>111</div>与遮罩<div class='mask'></div>中实现点击事件的正常响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常我们用遮罩后会覆盖到一些需要点击的事件例如：

<div class="demo" click="aaa">111</div>
<div class="mask"></div>
<style>
   .mask{
              width:100%;
              height:100vh;
              background-color:rgba(0,0,0,.5);
              position: absolute;
              left: 0;
              top: 0;
          }
</style>

此时mask类名的元素就会遮挡住demo类名的元素，而且demo类名的aaa点击事件也就无法点击了。而pointer-events: none;就是让aaa这个点击事件可以继续能够点击到，还不影响mask的遮罩。

<div class="demo" click="aaa">111</div>
<div class="mask"></div>
<style>
   .mask{
              width:100%;
              height:100vh;
              background-color:rgba(0,0,0,.5);
              position: absolute;
              left: 0;
              top: 0;
              pointer-events: none;
          }
</style>