Question

我发现了html5的<details>元素，这让我想确定是否可以通过css单独实现一个简单且可重用的show / hide。

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

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

我希望能够应用show / hide的简单示例代码：

<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存在。

Answer 1

基于结构（ for modern browsers ）有很多选项。

看看

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

这些可以与类 / ids / 伪选择器（如:hover等）结合使用，并创建一个大列表选项。

这是我展示的一个小型演示：http://jsfiddle.net/gaby/8v9Yz/

Answer 2

使用嵌套的div和目标尝试此操作。我不是CSS大师，因此可能存在各种各样的缺陷，但似乎有效。

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

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

Answer 3

没有确切代码的CSS难以直观显示，但更改display悬挂的visibility或:hover声明有什么问题？

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

我概括地误解了这个问题......关心添加代码？

Answer 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;}

实现纯css show / hide的最简单方法是什么？

4 个答案: