使用 CSS 显示和隐藏具有不同父级的 div 元素答案

【问题标题】：Display and hide div elements with different parents using CSS使用 CSS 显示和隐藏具有不同父级的 div 元素
【发布时间】：2016-08-31 14:05:18
【问题描述】：

我已经在how to hide a div with css 上查看了问题和后续答案，但如果不同元素不在同一个父项下，我无法弄清楚如何使其工作。例如：

<head>
  <style>
    section .city {
      display: none;
    }

    nav .london:hover ~ section .london {
      display: block;
    }
  </style>
</head>

<body>
  <nav>
    <div class="city london">London</div>
  </nav>
  <section>
    <div class="city london">
      <p class="text">London text etc.</p>
    </div>
  </section>
</body>

在这里，我只想在导航部分中的相应 div 悬停时显示 .text 元素。这在没有导航和部分区域的情况下有效，因为 div 变成了兄弟，但是我如何在仍然使用导航和部分标签的同时获得相同的行为？

【问题讨论】：

你想遍历一个元素的父元素，而仅使用 html,css 尚无法实现。为此，您需要使用基于 JS 的解决方案。
仅使用 CSS 是不可能的
@Mike 在这种情况下，不推荐使用 nav 和 section 标签，还是我应该继续使用 JavaScript？
最接近的实现方法是调用父选择器 - kodeweave.sourceforge.net/editor/…
@MichaelSchwartz 在完整代码中，我有多个城市，并且希望在导航栏中的特定元素悬停（而不是整个导航栏）时显示特定文本。还有办法做到这一点吗？

标签： html css

【解决方案1】：

使用solution 可以做到这一点。

标签可以与分离，只有input元素和点击标签时隐藏/显示的元素必须属于同一个父元素。

【讨论】：