实现纯 CSS 显示/隐藏的最简单方法是什么？答案

【问题标题】：What is the simplest way to implement pure css show/hide?实现纯 CSS 显示/隐藏的最简单方法是什么？
【发布时间】：2011-09-05 13:17:14
【问题描述】：

我发现了 html5 的 <details> 元素，这让我想确定是否可以仅通过 css 实现简单且可重用的显示/隐藏。

我过去创建了一种显示/隐藏机制来显示和隐藏内容，方法是给两个元素相对定位和一个负 z-index，然后在悬停时减小前面元素的 z-index（并增加悬停时后退元素的 z-index）。

但是，该方法仅适用于位于同一位置的元素。是否有其他技术可以模拟非重叠元素的显示/隐藏？例如显示一段描述性文本的标题。

我希望能够应用显示/隐藏的简单示例代码：

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

是的，我确实知道 jQuery 存在。

【问题讨论】：

在什么活动中显示/隐藏？点击、悬停、...？
单击或悬停都可以正常工作，尽管悬停触发区域必须允许将悬停移动到显示区域并仍然显示它，尽管我认为这可以通过减少并在悬停时增加 z 索引。另外，我很确定 css 中没有任何类型的点击触发器？
其实有：jsfiddle.net/simevidas/pdHDH
@{Sime Vidas} 天哪，太好了，很高兴知道。
另见Show / hide div on click with CSS

标签： css show-hide

【解决方案1】：

有很多基于结构的选项（对于现代浏览器）。

看看

selector + selector adjacent sibling selector
selector ~ selector general sibling selector
selector selector descendant selector
selector > selector child selector

这些可以与 classes / ids / pseudo-selectors （如:hover 等）组合，并创建一个大的选项列表。

这是我为展示它们而制作的一个小演示：http://jsfiddle.net/gaby/8v9Yz/

【讨论】：

【解决方案2】：

尝试使用嵌套的 div 和目标。我不是 CSS 专家，所以可能存在各种缺陷，但它似乎有效。

http://jsfiddle.net/NmdxC/6/

#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }

【讨论】：

【解决方案3】：

没有确切代码的 CSS 很难可视化，但是更改悬挂在 :hover 上的 display 或 visibility 声明有什么问题？

a #myelement{display:none;}
a:hover #myelement{display:block;}

我可能误解了这个问题...要添加代码吗？

【讨论】：

不显示：无阻止悬停？

【解决方案4】：

首先想到的是：

<a class="blah" href="#">Hello<span>Test</span></a>


a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}

【讨论】：

刚刚看到您的编辑...我很确定您需要一个解决方案，将“显示隐藏文本”嵌套在上述触发器中，因为这是您唯一的方法能够使用 :hover.