当两个绝对定位的 div 完全重叠时，仅顶层元素默认响应交互；本文提供一种基于 `pointer-events` 动态切换的可行方案，并重点分析其局限性，同时推荐更健壮的语义化替代方案。
在 Web 开发中，偶尔会遇到需要视觉上层叠但功能上需独立响应用户交互（如点击、悬停、滚动）的布局场景。例如：一个带滚动内容的底层容器（.scrollable），叠加一个用于触发状态反馈的透明操作层（.hoverable）。由于 CSS 的事件捕获机制遵循“从上到下”的堆叠顺序（z-index 高者优先接收 pointer events），默认情况下，只有最上层的元素能响应鼠标事件——这导致底层的滚动和点击完全失效。
✅ 可行但需谨慎的动态 pointer-events 方案
核心思路是：允许两层同时接收指针事件，但在悬停时临时禁用上层的事件捕获，使鼠标事件穿透至下层，从而兼顾 hover 视觉反馈与底层滚动/点击能力：
.container {
position: relative;
}
.scrollable {
border: 1px solid #3498db;
height: 100px;
width: 200px;
overflow-y: auto;
z-index: 1;
position: absolute;
pointer-events: all; /* 显式启用，确保可滚动/可点击 */
}
.hoverable {
color: #e74c3c;
height: 100px;
width: 200px;
border: 1px solid #e74c3c;
z-index: 2;
position: absolute;
pointer-events: all; /* 允许初始悬停检测 */
}
.hoverable:hover {
background-color: rgba(0, 0, 0, 0.2);
pointer-events: none; /* 关键：悬停时透传事件到底层 */
}✅ 效果说明：
- 初始状态下，.hoverable 捕获 mouseenter 并显示背景色；
- 一旦进入悬停态，pointer-events: none 立即生效，后续所有鼠标事件（包括 click、scroll、mousemove）均穿透至 .scrollable；
- 用户可在悬停状态下正常滚动 .scrollable 内容，或点击其中的链接/按钮。
⚠️ 重要限制与风险：
- 无障碍缺陷：屏幕阅读器可能无法正确识别穿透行为，且 pointer-events: none 会同时禁用键盘焦点（如 Tab 导航），违反 WCAG 2.1 原则；
- 交互断裂：若用户快速移入/移出 .hoverable，可能出现悬停样式残留但事件未穿透的竞态问题；
- 移动端失效：hover 在触摸设备上无意义，该方案无法适配 tap/click 逻辑；
- 维护成本高：需额外 JS 补充触控支持（如监听 touchstart + pointerdown），违背纯 CSS 解决初衷。
✅ 推荐方案：语义化重构，避免重叠依赖
更专业、可持续的做法是放弃视觉重叠的强制耦合，转而通过单一 DOM 结构实现同等效果：
方案一：伪元素覆盖（轻量级视觉增强）
.scrollable {
position: relative;
/* ...原有样式 */
}
.scrollable::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none; /* 纯视觉层，不拦截事件 */
opacity: 0;
transition: opacity 0.2s;
}
.scrollable:hover::before {
opacity: 0.2;
background-color: rgba(0,0,0,0.3);
}→ 用 ::before 实现悬停遮罩，底层 .scrollable 始终保有完整交互能力，零事件穿透风险。
方案二：事件委托 + 语义化结构
<div class="container">
<div class="interactive-layer">
<div class="scrollable-content">
<p>...长文本...</p>
</div>
<div class="hover-trigger" aria-hidden="true"></div>
</div>
</div>.interactive-layer {
position: relative;
width: 200px; height: 100px;
}
.scrollable-content {
overflow-y: auto;
height: 100%;
}
.hover-trigger {
position: absolute;
inset: 0;
z-index: 1;
}// 事件委托：统一处理 hover/click，精准控制行为
const layer = document.querySelector('.interactive-layer');
layer.addEventListener('mouseenter', () => layer.classList.add('is-hovered'));
layer.addEventListener('mouseleave', () => layer.classList.remove('is-hovered'));
// 点击事件直接绑定到 .interactive-layer，内部逻辑分发→ 结构清晰、可访问性强（支持键盘导航与 ARIA），且便于扩展点击热区、拖拽等高级交互。
总结
虽然通过 pointer-events: none 在悬停时实现事件穿透是一种技术上“可行”的 hack，但它牺牲了可访问性、跨平台兼容性与长期可维护性。真正的专业实践，不是让重叠元素“共享”事件，而是重新设计 DOM 与 CSS 结构，使交互意图明确、语义合理、行为可预测。 优先采用伪元素、事件委托或 CSS 自定义属性（CSS Custom Properties）驱动状态，才是现代前端开发的稳健之选。
