切换CSS3实现隐藏与显示效果

这段时间html5,css3可谓大大的火了，什么apple与adobe的冲突，IE9 beta preview开放下载，并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰尖浪头。然而，当html5与css3正式被推出时，它们能为整个互联网带来什么呢，又能给web开发者，尤其是web前端开发者带来什么不同呢？


　　我想，当html5与css3正式发布时，将给整个业界带来的好处是显著的，至于那个度是多少，我也不能断下结论。


　　所以，我们都可以趁着现在去尝尝鲜，小小的把玩一下。


　　今天，分享一个用CSS3实现简单的显示与隐藏的切换效果。是的，这个效果是不需要通过JavaScript的。


　　你可以使用 Firefox3.6+ 及 Opera10.53+ 预览：DEMO：css实现显示与隐藏切换


　　以下是这个DEMO的基本HTML结构：


　　<div id="switch">
    　　<a href="?" class="display">显示</a>
    　　<a href="?" class="hide">隐藏</a>
    　　<p class="cont">CSS3将带给互联网无限的精彩，很多遥不可及的事情将可信手拈来。</p>
　　</div>


　　CSS实现：


　　#switch .hide{display:none;}
　　#switch .cont{display:none;}
　　#switch .display:focus{display:none;}
　　#switch .display:focus + .hide{display:inline;}
　　#switch .display:focus ~ .cont{http://blog.sina.com.cn/u/5614217375}


　　简单的数行代码就可以实现隐藏和显示，是不是给你带来些许激动了？虽说这个DEMO还不够让人满意，但广大人民的智慧是无限的，定能将之做得更加完美。


　　相信，更多新特性的展现会成为促使html5与css3的尽早推行的动力。因为，一切皆有可能。