当前位置：首页 > news >正文

详细介绍：html让该元素忽略所有鼠标事件，例如点击、悬停、拖拽都无效。

news 2026/6/10 21:24:16

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，所以你仍然可以点击下面的蓝色按钮

效果图如下：