悬停绝对定位覆盖层时显示提示框并保留底层交互

通过合理设置 z-index 层级关系并借助父容器的 :hover 伪类状态，可以在不阻断按钮点击、聚焦等底层事件的前提下，实现鼠标悬停任意区域（例如全宽覆盖层）时触发信息提示框的显示与隐藏。

在实际的 UI 交互开发流程中，经常遇到这样的需求：一组按钮或卡片需要统一展示悬停提示（tooltip），并且希望提示在鼠标划过整个区域时都能触发——即便覆盖层采用绝对定位并铺满整个视口。常见的痛点在于：如果用绝对定位的覆盖层直接捕获 hover 事件，底部的按钮将无法点击，键盘导航也会失效。核心矛盾在于：覆盖层既要响应悬停状态，又不能干扰下层元素的正常交互。

先给出解决方案：将 hover 状态委托给父容器，把层级控制与事件处理彻底分离。

无需依赖 .hover-box:hover + .info 这种相邻兄弟选择器——该写法要求鼠标必须精确悬停在覆盖层自身，适用场景十分有限。推荐的做法是将状态绑定到父容器 .parent:hover。这样一来，只要鼠标进入父容器的任意区域（包括按钮、空白处或覆盖层），都能触发 .info 显示，同时覆盖层不会拦截底层事件。

关键的 CSS 实现技巧可以归纳为以下几点：

• 为所有可交互的子元素（例如按钮）显式设置 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 场景）。

下面直接提供一个完整可运行的示例：

  
  btn0  btn1  info

.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;}

以下几个细节值得特别留意：

• z-index 仅对定位元素（position 不为 static）生效，因此 .hover-box 和 button 必须拥有明确的定位方式（绝对定位或相对定位）；
• 如果父容器中还包含其他动态内容，建议为 .info 添加 transform: translateY(-2px) 或适当调整外边距，避免遮挡按钮；
• 移动端 CSS hover 行为并不可靠，需要额外使用 JavaScript 处理 touchstart 事件；
• 示例中覆盖层使用了 100vw，如果需要严格限制在父容器内部，只需改为 width: 100% 并确保父容器 overflow: visible 即可。

这套方案兼顾了语义清晰与浏览器兼容性（IE11+ 同样适用），完全不需要 JavaScript 即可实现声明式的悬停提示。在常见的卡片、工具栏、操作列表等场景中，这是一种简洁且稳健的实践方式。