本文详解如何让层叠堆叠的两个 div 同时响应鼠标事件（click/hover）并保持滚动功能，通过 `pointer-events` 动态切换与合理 dom 结构设计，兼顾可访问性与工程实践。
在 Web 开发中，有时需将多个元素视觉上完全重叠（如悬浮提示层覆盖在可滚动内容区之上），同时要求二者均能独立响应用户交互——例如：底层 div 支持垂直滚动与点击，顶层 div 支持 hover 高亮与点击跳转。但默认情况下，由于层叠顺序（z-index）和事件捕获机制，上层元素会“遮挡”下层的鼠标事件，导致仅顶层可交互。
核心原理：动态控制 pointer-events
CSS 的 pointer-events 属性是解决该问题的关键。它不仅可设为 none（完全禁用）或 auto（默认），还可设为 all（显式启用所有指针事件），更重要的是——它支持在伪类（如 :hover）中动态修改。利用这一特性，我们可在用户悬停顶层元素时，临时将其自身设为 pointer-events: none，从而让鼠标事件穿透至下层；而当鼠标移出时恢复响应，确保点击仍可触发。
以下为推荐实现方案（已验证兼容 chrome/firefox/safari）：
.container { position: relative; width: 200px; height: 100px; } .scrollable { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #3498db; overflow-y: auto; z-index: 1; pointer-events: all; /* 显式启用，确保滚动/点击生效 */ background-color: #f8f9fa; } .hoverable { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #e74c3c; z-index: 2; pointer-events: all; /* 默认可响应 */ color: #e74c3c; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* 悬停时：自身失活，事件穿透到底层 */ .hoverable:hover { pointer-events: none; background-color: rgba(0, 0, 0, 0.1); } /* 恢复悬停样式（不依赖 pointer-events） */ .hoverable:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; }<div class="container"> <div class="scrollable"> <p>Lorem ipsum dolor sit amet... <!-- 长文本，确保可滚动 --></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2649" title="ShareGPT"><img src="https://img.php.cn/upload/ai_manual/001/246/273/697dcb67c4bc6202.png" alt="ShareGPT"></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2649" title="ShareGPT">ShareGPT</a> <p>ShareGPT是一个Chrome扩展，可以让你一键分享你的ChatGPT对话。</p> </div> <a href="/ai/2649" title="ShareGPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div> <div class="hoverable">Hover me!</div> </div>✅ 效果说明：
- 鼠标移入 .hoverable 区域 → 其 pointer-events: none 生效 → 滚轮/点击均作用于 .scrollable
- 同时通过 ::before 伪元素叠加半透明层，维持视觉悬停反馈
- 点击 .hoverable 本身仍有效（因 :hover 触发前点击已捕获）
- 滚动 .scrollable 时，.hoverable 始终跟随，无偏移
⚠️ 重要注意事项
- 可访问性警告：此方案依赖鼠标悬停，对键盘导航（Tab）、触屏设备或屏幕阅读器支持较弱。生产环境建议优先采用语义化替代方案（见下文）。
- 不要滥用 isolation: isolate：该属性用于创建新的层叠上下文（stacking context），不影响事件穿透逻辑，与本问题无关。
- 避免 pointer-events: none 在父容器上设置：这会彻底禁用子元素事件，必须作用于具体目标元素。
- 滚动兼容性：overflow: scroll/auto 元素需有明确尺寸与 pointer-events: all（部分旧版浏览器可能默认为 auto，但显式声明更稳妥）。
✅ 更健壮的工程建议（推荐优先采用）
若业务场景允许，应尽量规避纯视觉重叠的双层结构：
- 合并为单容器 + 伪元素：用 ::before/::after 实现悬浮效果层，主体内容保留在同一 DOM 节点内，天然共享事件；
- 使用 position: sticky 或 transform 微调布局：减少绝对定位依赖；
- 封装为自定义组件（React/Vue）：通过事件委托统一处理 mouseenter/click，内部根据坐标判断响应区域。
总之，pointer-events 动态切换是解决“重叠元素共存交互”的可行技术方案，但务必评估其可访问性代价，并在架构层面优先考虑语义清晰、事件自然的 DOM 结构设计。