仿QQ空间个人中心热点话题模块

仿QQ空间个人中心热点话题模块: Demo演示

jquery代码(需预先引用jquery.js，你懂得)：

$(document).ready(function(){
	$(".box ul li:first").addClass("active");
	$(".box ul li").hover(function(){
		$(this).addClass("active").siblings().removeClass("active");
	},function(){
	});
});

CSS代码：

.box { width:200px; margin:auto; font-size:12px; font-family:"microsoft yahei"; border:1px #eee solid; overflow:hidden; zoom:1; }
.box ul { list-style:none; }
.box ul li { line-height:27px; }
.box ul li h2 { width:150px; float:left; text-indent:8px; }
.box ul li font { width:40px; float:right; text-align:right; padding-right:10px; }
.box ul li h2 a { font-size:12px; color:#333; text-decoration:none; }
.box ul li .show { float:left; padding:5px; line-height:18px; border:1px #d4c5dc solid; background:#faf8fd; display:none; }
.box ul li .show a { font-size:12px; color:#666; }
.box ul .active .show { display:block; }

HTML代码：

<div class="box">
<ul>
<li>
<div class="mode"><h2><a href="javascript:void(0);">乔布斯去世</a></h2><font>3029</font></div>
<div class="show"><a href="#">苹果公司宣布前CEO乔布斯去世，享年56岁。</a></div>
</li>
<li>
<div class="mode"><h2><a href="javascript:void(0);">范冰冰红毯抢镜</a></h2><font>3029</font></div>
<div class="show"><a href="#">范冰冰釜山电影节抢风头，一秒换装惊艳四座。</a></div>
</li>
<li>
<div class="mode"><h2><a href="javascript:void(0);">谢娜蜜月合照</a></h2><font>3029</font></div>
<div class="show"><a href="#">谢娜晒"蜜月合照"，网友直呼被忽悠。</a></div>
</li>
<li>
<div class="mode"><h2><a href="javascript:void(0);">青岛惊现魔鬼鱼</a></h2><font>3029</font></div>
<div class="show"><a href="#">青岛渔民捕获520斤重"魔鬼鱼"，长相似蝙蝠。</a></div>
</li>
<li>
<div class="mode"><h2><a href="javascript:void(0);">全球大学排行榜</a></h2><font>3029</font></div>
<div class="show"><a href="#">哈佛首失大学排名榜首，北大清华跻身百强。</a></div>
</li>
</ul>
</div>