如何仅在鼠标悬停时显示当前节点的专属信息提示（不触发父级或子级关联提示）-html教程-PHP中文网

如何仅在鼠标悬停时显示当前节点的专属信息提示（不触发父级或子级关联提示）

本文介绍一种纯 CSS 方案，通过结构化 HTML 与相邻兄弟选择器（+）精准控制悬停时的信息提示显示逻辑，确保每次仅显示被直接悬停节点对应的 .info-on-parent-hover 元素，彻底避免嵌套层级间的信息叠加显示问题。

本文介绍一种纯 css 方案，通过结构化 html 与相邻兄弟选择器（`+`）精准控制悬停时的信息提示显示逻辑，确保每次仅显示被直接悬停节点对应的 `.info-on-parent-hover` 元素，彻底避免嵌套层级间的信息叠加显示问题。

在构建具有层级关系的交互式树形结构（如导航菜单、组织架构图或配置节点面板）时，常需为每个可交互节点附加一条“悬停即显”的辅助说明信息。但若直接使用 .always-visible:hover > .info-on-parent-hover，CSS 的层叠特性会导致：当深层子节点（如 node D）被悬停时，其所有祖先 .always-visible 容器均匹配 :hover 状态，从而连带激活多层 .info-on-parent-hover —— 这违背了“唯一焦点提示”的设计目标。

核心解法：分离可悬停区域与信息容器的 DOM 关系

关键在于避免让信息元素成为任意 .always-visible 的直系子元素，而是将其严格置于一个独立、不可嵌套的可悬停文本容器之后，并利用相邻兄弟选择器 + 实现单向、单层绑定：

.always-visible {
  display: block;
}

.info-on-parent-hover {
  background-color: #ddd;
  font-weight: normal;
  font-style: italic;
  display: none;
}

.always-visible .text-to-hover {
  font-weight: bold;
  background-color: #777;
  padding: 4px 8px;
  cursor: pointer;
}

.always-visible .text-to-hover:hover {
  background-color: #3377cc;
}

/* ✅ 精准命中：仅当 .text-to-hover 被悬停时，其后紧邻的 .info-on-parent-hover 显示 */
.always-visible .text-to-hover:hover + .info-on-parent-hover {
  display: block;
}

对应 HTML 结构需严格遵循「悬停文本容器 → 信息容器」的线性兄弟顺序：

<div class="always-visible">
  <div class="text-to-hover">node A [top-level node]</div>
  <div class="info-on-parent-hover">some info about A</div>
</div>

<div class="always-visible">
  <div class="text-to-hover">node B [top-level node]</div>
  <div class="info-on-parent-hover">some info about B</div>

  <!-- 子节点必须独立包裹，且保持相同结构 -->
  <div class="always-visible">
    <div class="text-to-hover">node C [child node of B]</div>
    <div class="info-on-parent-hover">some info about C</div>
  </div>

  <div class="always-visible">
    <div class="text-to-hover">node D [child node of B]</div>
    <div class="info-on-parent-hover">some info about D</div>
  </div>
</div>

✅ 为什么此方案可靠？