pointer-events: none。 "影子属性"。解决遮罩层下面图片或文字超链接无法选中执行功能

本文链接：https://blog.youkuaiyun.com/liu__xi__/article/details/105581268

本文介绍了CSS中的pointer-events: none属性，该属性使得元素变得不可点击，形如影子，常用于遮罩层以允许底层元素的交互。在解决遮盖层下图片或文字超链接无法执行功能的问题中，pointer-events: none发挥了关键作用。

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

pointer-events: none

今天又发现了一个神奇的“影子”属性：pointer-events: none

为什么理解为影子属性呢？

因为pointer-events: none 的作用是让元素实体 “虚化，简单的理解为一个影子，高大上一点就是海市蜃楼，看得见却摸不着。

今日份踩坑：

给盒子写遮盖层时，下方的图片超链接被遮盖层挡住了，功能无法实现，想通过遮盖层点击实现跳转功能：

body：

 <div class='masonry-layouts-content-box'>
                              <div class='masonry-layouts-img-box'>   //图片盒子
                                  <a href="/getObject?filename=${item.name}" >
                                      <img class='masonry-layouts-img' src='${item.src}'/>
                                  </a>
                              </div>
                              <div class='masonry-layouts-img-box-shadow'> //遮盖层
                                  
                                   <p>Name:${item.name}</p>
                                   <p>Size:${item.size}kb</p>
                                   <p>LastModified:${item.lastModified.slice(1,10)}</p> 
                               </div>
                              
                          </div>

script：

$(document).hover(function(){
   $(".masonry-layouts-content-box").mouseenter(function(){
   $(this).children(".masonry-layouts-img-box-shadow").show().siblings().children(".masonry-layouts-img-box-shadow").hide();
      });
   $(".masonry-layouts-content-box").mouseleave(function(){
      $(this).children(".masonry-layouts-img-box-shadow").hide();
    });
  });

Css:

.masonry-layouts-img-box{
    width: 100%;
    height:84%;
    box-sizing: border-box;
    display: flex;
    align-items:center;
    justify-content: center;
    max-height: 100%;  
    max-width: 100%; 
    overflow: hidden;
}

.masonry-layouts-img-box-shadow{
    width:100%;
    height:84%;
    display: none;
    background-color: black;
    opacity: .35;
    position: absolute;
    pointer-events: none; /*pointer-events:让元素实体虚化--解决添加遮罩层之后下方内容点击不到的问题*/
    left: 0;
    top: 0;
}