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

最新推荐文章于 2024-09-27 08:22:22 发布

小邱程序员

最新推荐文章于 2024-09-27 08:22:22 发布

阅读量672

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_62876802/article/details/125789972

版权

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

<div class="demo" click="aaa">点击</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">点击</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>