通过将非交互性覆盖层元素移出 <a> 标签并配合 pointer-events: none，可在不修改 HTML 结构的前提下精准控制点击区域，实现部分区域禁用链接、其余区域保持可点击。
通过将非交互性覆盖层元素移出 `` 标签并配合 `pointer-events: none`，可在不修改 html 结构的前提下精准控制点击区域，实现部分区域禁用链接、其余区域保持可点击。
在实际开发中，常需在链接内叠加装饰性或提示性图层（如水印、遮罩、图标角标等），但又不希望这些图层触发父级 <a> 的跳转行为。纯 CSS 实现的关键在于解耦交互区域——即让覆盖层“视觉上存在”，但“逻辑上不参与事件捕获”。
最直接可靠的方案是：将 #plate 移出 <a> 标签，并利用 pointer-events: none 确保其完全透传鼠标事件。这样既保留原有布局效果，又避免了嵌套导致的事件冒泡干扰。
✅ 推荐写法（结构清晰、语义合理、兼容性好）：
<div>
<a href="https://www.php.cn/link/c7c8c6f06ba0b5edd19e56048a7c4ec1">
<img src="https://placehold.it/200/333333" alt="main image" />
</a>
<img id="plate" src="https://placehold.it/100/999999" alt="overlay plate" />
</div>div {
border: 2px solid red;
width: 200px;
height: 200px;
position: relative; /* 为绝对定位提供参照 */
}
#plate {
position: absolute;
left: 20px;
top: 30px;
opacity: 0.7;
pointer-events: none; /* 关键：禁用所有鼠标事件 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- pointer-events: none 是核心，它使 #plate 完全不响应点击、悬停、拖拽等任何鼠标事件，事件将直接穿透至下层元素（包括 <a> 及其背景区域）；
- 必须为父容器 div 设置 position: relative，否则 #plate 的 absolute 定位将相对于文档根节点，导致错位；
- 若因业务限制无法调整 HTML 结构（即 #plate 必须保留在 <a> 内），可改用 pointer-events: none 配合 z-index 控制层级，但需注意：pointer-events 在 <a> 内部对子元素生效，此时需确保 #plate 的 z-index 高于主图，且明确设置 pointer-events: none ——不过该方案在旧版 Safari 中存在兼容性问题，不推荐作为首选；
- 所有图像建议添加 alt 属性，提升可访问性。
总结：纯 CSS 实现“局部禁用链接”的最佳实践是结构分离 + pointer-events: none。它无需 JavaScript、无兼容性陷阱、语义清晰，且便于维护与扩展。
