我一直在寻找一个很好的技巧来制作一个隐藏/显示内容或列表，只有CSS和没有javascript。
我已经设法做出这个动作：
我已经设法做出这个动作：
<!DOCTYPE html>
<head>
<style>
#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}
</style>
</head>
<body>
<div>
<a href="#show"class="show">[Show]</a>
<a href="#hide"class="hide">/ [Hide]</a>
<div id="cont">Content</div>
</div>
</body>
</html>
演示：http://jsfiddle.net/6W7XD/
它的工作，但不是应该的。这是问题：
显示内容时，您可以通过单击“页面上的任何位置”来隐藏内容。如何禁用？如何隐藏内容“只”点击隐藏？
先谢谢你！
解决方法
我不会使用复选框，我会使用你已经有的代码
演示http://jsfiddle.net/6W7XD/1/
CSS
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert{display:none;}
HTML
<span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert" >Some alarming information here</p>
这样，文本只能隐藏在隐藏元素的点击上
