本文详解如何让层叠堆叠的两个 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" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></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 结构设计。
