通过合理设置 z-index 与父容器 :hover 触发逻辑，可在不阻断底层按钮点击/聚焦等事件的前提下，实现悬停显示信息框的效果。

通过合理设置 `z-index` 与父容器 `:hover` 触发逻辑，可在不阻断底层按钮点击/聚焦等事件的前提下，实现悬停显示信息框的效果。

在前端开发中，常需为一组元素（如按钮）添加悬停提示信息（tooltip 或 info box），但若直接使用全宽绝对定位覆盖层（.hover-box）捕获 hover 事件，会因层叠顺序遮挡底层元素，导致其点击、聚焦、键盘导航等交互失效。常见误区是尝试用 pointer-events: none 让覆盖层“透传”事件——但这同时会使 .hover-box:hover 伪类失效，无法触发信息显示。

核心解法：将 hover 行为上提至父容器，并通过层叠控制交互优先级

关键在于放弃依赖 .hover-box:hover 触发显示，转而监听 .parent:hover；同时确保可交互元素（如按钮）拥有更高 z-index，使其物理上位于覆盖层之上，从而正常响应所有事件（click、focus、keydown 等）：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

.parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.hover-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;      /* 横向覆盖视口，适配不同布局 */
  height: 100%;
  background: rgba(255, 0, 0, 0.1); /* 使用 rgba 更安全 */
  z-index: 1;         /* 覆盖层置于底层 */
}

.info {
  display: none;
  position: relative;
  z-index: 3;         /* 信息框需高于按钮，确保可见 */
}

.parent:hover .info {
  display: inline-block;
}

button {
  margin: 2px;
  z-index: 2;         /* 按钮置于覆盖层之上，但低于 info */
  /* 注意：z-index 仅对定位元素生效，此处 button 默认 static，故需显式设为 relative 或其它定位 */
}

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

✅ 效果验证：

• 鼠标移入 .parent 区域（含任意按钮或空白处）→ .info 显示；
• 所有按钮仍可正常点击、Tab 键聚焦、空格/回车触发；
• 即使 .parent 宽度由 fit-content 决定（内容窄于 100vw），覆盖层横向延展也不影响底层交互。

⚠️ 注意事项：

• z-index 仅对 已定位元素（position 不为 static）生效。若按钮未设 position，z-index 将被忽略。推荐统一为 position: relative；
• 若需支持触摸设备，建议补充 @media (hover: hover) 媒体查询做渐进增强，避免移动端误触发；
• 100vw 在滚动条存在时可能导致横向溢出，生产环境建议改用 width: max(100vw, 100%) 或 JavaScript 动态计算；
• 更健壮的方案可结合 :has() 伪类（现代浏览器支持）或 JavaScript 监听 mouseenter，但纯 CSS 解法在此场景下完全可行且高效。

此方案兼顾语义清晰性、无障碍访问（按钮保有完整焦点与 ARIA 可访问性）及性能（零 JS 依赖），是处理“悬停显示 + 事件透传”需求的推荐实践。