通过合理设置 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 悬停提示的推荐实践。
