使用 CSS 显示和隐藏具有不同父级的 div 元素
Posted
技术标签:
【中文标题】使用 CSS 显示和隐藏具有不同父级的 div 元素【英文标题】：Display and hide div elements with different parents using CSS 【发布时间】：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 在完整代码中，我有多个城市，并且希望在导航栏中的特定元素悬停（而不是整个导航栏）时显示特定文本。还有办法做到这一点吗？ 【参考方案1】：使用solution 可以做到这一点。
标签可以与分离，只有input元素和点击标签时隐藏/显示的元素必须属于同一个父元素。
【讨论】：
以上是关于使用 CSS 显示和隐藏具有不同父级的 div 元素的主要内容，如果未能解决你的问题，请参考以下文章
有两个div，一个父级，一个子级，父级有滚动条，样式如何写才能让子级的div固定在顶部，不随滚动条