pointer-events: none; 是 CSS 属性，意思是：
让该元素忽略所有鼠标事件，例如点击、悬停、拖拽都无效。
详细解释
元素仍然 显示在页面上
元素仍然 占据空间
但是鼠标操作会“穿透”它，直接作用到 它下面的元素
示例
.top-box {
width: 200px;
height: 100px;
background: rgba(255, 0, 0, 0.5);
pointer-events: none; /* 不响应鼠标事件 */
}
.bottom-box {
width: 200px;
height: 100px;
background: lightblue;
margin-top: -50px; /* 叠在上面 */
}
我在下面
我在上面，但点击不了效果：
红色半透明盒子在上面
你点击它时，实际上是点击下面的蓝色盒子
红色盒子不响应鼠标事件
小技巧
常用于 遮罩层、装饰元素
可以配合
opacity或visibility做渐隐动画，同时不影响用户操作如果想恢复鼠标事件，只需设置：
pointer-events: auto;写了一段代码体会一下，
增加了
pointer-events: none;的代码例子如下body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
font-family: sans-serif;
}
/* 蓝色按钮，位于下面 */
.bottom-button {
width: 200px;
height: 50px;
background: lightblue;
border: none;
pointer-events: none;
cursor: pointer;
margin-bottom: 20px;
}
/* 半透明红色覆盖层，位于上面 */
.overlay {
width: 200px;
height: 50px;
background: rgba(255, 0, 0, 0.5);
position: absolute;
top: 120px; /* 与按钮对齐 */
pointer-events: none; /* 不响应鼠标事件 */
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.wrapper {
position: relative;
}
我是覆盖层
红色覆盖层有 pointer-events: none，所以你仍然可以点击下面的蓝色按钮没增加的如下
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
font-family: sans-serif;
}
/* 蓝色按钮，位于下面 */
.bottom-button {
width: 200px;
height: 50px;
background: lightblue;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
/* 半透明红色覆盖层，位于上面 */
.overlay {
width: 200px;
height: 50px;
background: rgba(255, 0, 0, 0.5);
position: absolute;
top: 120px; /* 与按钮对齐 */
pointer-events: none; /* 不响应鼠标事件 */
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.wrapper {
position: relative;
}
我是覆盖层
红色覆盖层有 pointer-events: none，所以你仍然可以点击下面的蓝色按钮效果图如下：
区别在于鼠标垫点击事件和可转化手型鼠标。
)
)
)
)
