什么叫block显示哦~~~~`
CSS可以一次搞定 用hover+display:none
代码:---------------
<style>
body{ font-size:12pxline-height:1.8font-family:Verdana, "宋体", Arial,Sanstext-align:centerbackground:#FFFcolor:#666margin:50pxpadding:0list-style:none}
a:link,a:visited{color:#000099text-decoration: underline}
a:hover,a:active{color:#000text-decoration: none}
#zishu_test li{ float:leftwidth:14%text-align:centermargin:0 autolist-style:none }
#zishu_test li a{border-right:1px solid #fffborder-bottom:1px solid #fffwidth:100pxheight:110pxbackground:#fffdisplay:blockpadding-top:10pxmargin:auto}
#zishu_test li img{ width:75pxheight:75pxdisplay:blocktext-align:centermargin:autobackground:#FFFpadding:3pxborder:1px solid #D8A18B}
#zishu_test li span{display:none}
#zishu_test li a:hover span{ margin-top:-10pxdisplay:blockborder-bottom:1px solid #666border-right:1px solid #666background:#FA9000width:100pxcolor:#FFFposition:absolute}
* html #zishu_test li a:hover span {margin-left:-8px} /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px}/* IE7*/
#zishu_test li a:hover{ border-right:1px solid #D8A18Bborder-bottom:1px solid #D8A18Bwidth:100pxheight:110pxbackground:#F5F5F5display:blockpadding-top:10px}
</style>
</head>
<body>
<div id="zishu_test">
<ul>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="http://yy.kijiji.cn/img/p/10000009.jpg">pixu</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>24d / 35 hits</span><img src="http://yy.kijiji.cn/img/p/294343.jpg">秀才</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>66d / 87 hits</span><img src="http://yy.kijiji.cn/img/p/10000010.jpg">透露</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>40d / 34 hits</span><img src="http://yy.kijiji.cn/img/p/11709126.jpg">LIVID</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>47d / 56 hits</span><img src="http://yy.kijiji.cn/img/p/10000002.jpg">老孟</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>42d / 36hits</span><img src="http://yy.kijiji.cn/img/p/11695932.jpg">小玉</a></li>
<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>63d / 67 hits</span><img src="http://yy.kijiji.cn/img/p/10000025.jpg">pixu</a></li>
</ul>
</div>
</body>
</html>
就是隐藏display:none
当前显示的设置为display:block
一般使用脚本实现
比如你要隐藏的元素为<div id="info1"></div>
要显示的元素为<div id="info2"></div>
假设使用jquery控制
代码为以下两句:
$("#info1").hide()
$("#info2").show()