如何让重叠的两个 div 同时支持点击、悬停与滚动？

当两个绝对定位的 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）驱动状态，才是现代前端开发的稳健之选。