如何只显示当前节点提示信息

.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）。

通过将交互锚点显式分离并借助 + 的精确邻接约束，即可优雅解决嵌套悬停中的提示污染问题，确保用户视线始终聚焦于当前操作对象的专属信息。

终于介绍完啦！小伙伴们，这篇关于《如何只显示当前节点提示信息》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！