本文介绍在不修改 HTML 结构的前提下，通过 pointer-events: none 纯 CSS 方案使指定图像（如装饰性覆盖层）失效点击事件，同时保留其父级 标签其余区域的可点击性。
本文介绍在不修改 html 结构的前提下，通过 `pointer-events: none` 纯 css 方案使指定图像（如装饰性覆盖层）失效点击事件，同时保留其父级 `` 标签其余区域的可点击性。
在实际开发中，常需在可点击的链接内叠加一个装饰性或遮罩性图片（例如水印、角标、半透明浮层），但又不希望该图层触发跳转行为。若直接将 放在 内部，它会继承父链接的点击行为——即使视觉上仅覆盖局部区域，整个 的点击热区仍包含它。
正确解法：使用 pointer-events: none
无需移动 DOM 结构，只需为 #plate 添加一行 CSS：
#plate {
position: absolute;
left: 20px;
top: 30px;
opacity: 0.7;
z-index: 10;
pointer-events: none; /* 关键：禁用鼠标事件穿透 */
}
✅ 效果说明：
- pointer-events: none 使元素完全不响应任何鼠标事件（包括 click、hover、focus）；
- 鼠标事件将“穿透”该元素，交由其下层元素（即 中的主图或 自身）处理；
- 其他区域（如主图未被覆盖部分）仍可正常点击跳转；
- 该属性不影响视觉渲染（opacity、z-index 等照常生效）。
⚠️ 注意事项：
- pointer-events: none 是 CSS2.1+ 标准属性，现代浏览器（Chrome/Firefox/Safari/Edge ≥12）均支持，但 IE ；若需兼容旧 IE，需改用 JavaScript 拦截事件或调整 DOM 结构（如将 #plate 移出 ，并用绝对定位复位）；
- 若 #plate 下方有其他交互元素（如按钮、输入框），它们也会接收穿透的事件，需确保层级逻辑合理；
- 不要误写为 pointer-events: disabled（无效值），正确值为 none 或 auto。
? 补充技巧：若需在 #plate 上实现部分交互（如 hover 提示），可配合 pointer-events: auto 与子元素控制，或改用伪元素 + ::before/::after 配合 pointer-events: none 实现更语义化的覆盖层。
综上，pointer-events: none 是解决“覆盖层阻断点击”问题最简洁、标准且高效的纯 CSS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
