如何在悬停绝对定位覆盖层时显示提示框同时保留底层元素的交互事件

通过合理设置 z-index 和利用父容器的 :hover 状态，可在不阻断按钮点击、聚焦等事件的前提下，实现悬停任意区域（如全宽覆盖层）时显示信息提示框。

通过合理设置 `z-index` 和利用父容器的 `:hover` 状态，可在不阻断按钮点击、聚焦等事件的前提下，实现悬停任意区域（如全宽覆盖层）时显示信息提示框。

在构建交互式 UI 时，常需为一组元素（如按钮、卡片）添加统一悬停提示（tooltip），但若使用 position: absolute 的覆盖层捕获 hover 事件，容易因层叠顺序遮挡底层元素，导致点击、键盘导航等事件失效。核心矛盾在于：既要让覆盖层响应 hover，又不能拦截其下元素的交互。

根本解法：事件委托 + 层级分离

不依赖 .hover-box:hover + .info 这类相邻兄弟选择器（它要求 hover 目标必须是覆盖层本身），而是将 hover 状态绑定到父容器——.parent:hover。这样，只要鼠标进入父容器任意区域（包括按钮、空白处或覆盖层），都能触发 .info 显示，同时避免覆盖层干扰底层元素。

关键 CSS 技巧：

• 给所有可交互子元素（如 button）显式设置 z-index: 2，确保它们始终位于覆盖层之上；
• 覆盖层 .hover-box 保持 position: absolute，但无需 pointer-events: none（否则无法触发父容器 hover）；
• .info 使用 display: none / inline-block 切换，并添加 position: relative 避免布局塌陷；
• 父容器启用 display: inline-flex 并设置 align-items: center，确保子元素垂直居中且宽度自适应内容（兼容 fit-content 场景）。

✅ 完整可运行示例：

<div class="parent">  <div class="hover-box"></div>  <button>btn0</button>  <button>btn1</button>  <button class="info">info</button></div>

.parent {  position: relative;  display: inline-flex;  align-items: center;  flex-wrap: nowrap;  width: fit-content; /* 支持父容器宽度自适应 */}.hover-box {  width: 100vw;      /* 横向铺满视口 */  height: 100%;       /* 高度继承父容器 */  background: rgba(255, 0, 0, 0.1);  position: absolute;  top: 0;  left: 0;  z-index: 1;         /* 低于按钮，高于默认层 */}button {  margin: 2px;  z-index: 2;         /* 关键：确保按钮可交互 */  padding: 6px 12px;  border: 1px solid #ccc;  background: #fff;}.info {  display: none;  position: relative;  z-index: 2;  background: #4CAF50;  color: white;  padding: 4px 8px;  border-radius: 3px;  font-size: 14px;}.parent:hover .info {  display: inline-block; /* 响应父容器 hover */}

⚠️ 注意事项：

• z-index 仅对定位元素（position 不为 static）生效，因此 .hover-box 和 button 必须有明确定位（absolute/relative）；
• 若 .parent 内含更多动态内容，建议为 .info 添加 transform: translateY(-2px) 或 margin-top 微调位置，避免遮挡按钮；
• 在移动端需额外处理 touchstart 事件（CSS hover 不可靠），可通过 JavaScript 补充支持；
• 100vw 覆盖层可能超出容器边界，如需严格限制在父容器内，可改用 width: 100% 并确保 .parent 有 overflow: visible。

该方案兼顾语义清晰性与浏览器兼容性（支持 IE11+），无需 JavaScript 即可实现声明式交互，是现代 CSS 悬停提示的推荐实践。