本文讲解如何使用 CSS 邻居选择器（+）配合语义化 HTML 结构，实现“仅显示直接父级被悬停元素所对应的提示信息”，彻底避免嵌套结构中因层级继承导致的多提示同时显示问题。
本文讲解如何使用 css 邻居选择器（`+`）配合语义化 html 结构，实现“仅显示直接父级被悬停元素所对应的提示信息”，彻底避免嵌套结构中因层级继承导致的多提示同时显示问题。
在构建具有层级关系的交互式 UI（如树形菜单、组织架构图或可折叠节点列表）时，常需为每个可交互节点附加一条辅助说明文本（例如 .info-on-parent-hover），且要求该文本仅在其直属父容器被鼠标悬停时显示——而当鼠标移入其子节点、兄弟节点或祖先节点时，其他提示必须保持隐藏。
原始方案（.always-visible:hover > .info-on-parent-hover）的问题在于：CSS 的 :hover 伪类会沿 DOM 树向上冒泡传播。一旦深层嵌套节点（如 node D）被悬停，其所有祖先 .always-visible 元素也会触发 :hover，导致各级 .info-on-parent-hover 同时显示，违背“单点聚焦”设计目标。
✅ 正确解法是解耦悬停目标与容器结构：将可悬停区域明确限定为一个独立子元素（如
），再利用相邻兄弟选择器 + 精确关联其后紧跟的提示节点：
.always-visible .text-to-hover:hover {
background-color: #3377cc;
cursor: pointer;
}
.always-visible .text-to-hover:hover + .info-on-parent-hover {
display: block;
}
关键原理在于：
- :hover 仅作用于 .text-to-hover 自身，不会向上影响外层 .always-visible 容器；
- + 选择器严格匹配紧邻的下一个兄弟元素，因此只有位于同一父级下、且顺序紧接在 .text-to-hover 之后的 .info-on-parent-hover 才会被选中；
- 子节点的 .text-to-hover 悬停时，其 .info-on-parent-hover 位于子 .always-visible 内部，与父级的提示节点互不构成兄弟关系，自然不会干扰。
✅ 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>
⚠️ 注意事项：
- 不可省略 .text-to-hover 包裹层，直接对 .always-visible 应用 :hover 会重蹈冒泡覆辙；
- .info-on-parent-hover 必须是 .text-to-hover 的下一个同级兄弟元素，中间插入其他元素将导致 + 失效；
- 若需支持键盘焦点（无障碍访问），建议补充 :focus-within 或 :focus 规则，并为 .text-to-hover 添加 tabindex="0"；
- 此方案纯 CSS 实现，零 JavaScript 依赖，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥12）。
通过将交互锚点显式分离并借助 + 的精确邻接约束，即可优雅解决嵌套悬停中的提示污染问题，确保用户视线始终聚焦于当前操作对象的专属信息。
