Hot topic module of imitating QQ space personal center

Hot topic module of personal center in imitating QQ space: Demo Demo

Jquery code (you need to refer to jquery.js in advance, you know )：

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

CSS code:

 .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 code:

 <div class="box"> <ul> <li> <div class="mode"><h2><a href="javascript: void (0);">Jobs died</a></h2><font>3029</font></div> <div class="show"><a href="#">Apple company Announced the death of former CEO Steve Jobs at the age of 56</ a></div> </li> <li> <div class="mode"><h2><a href="javascript: void (0);">Fan Bingbing stole the red carpet photo</a></h2><font>3029</font></div> <div class="show"><a href="#">Fan Bingbing stole the limelight at the Busan Film Festival and stunned four audiences by changing their clothes in one second</ a></div> </li> <li> <div class="mode"><h2><a href="javascript: void (0);">Group photo of Xie Na on her honeymoon</a></h2><font>3029</font></div> <div class="show"><a href="#">Xie Na shows "honeymoon photos", and netizens call her "fooled"</ a></div> </li> <li> <div class="mode"><h2><a href="javascript: void (0);">Devil Fish Found in Qingdao</a></h2><font>3029</font></div> <div class="show"><a href="#">Qingdao fishermen catch 520 jin "Devil Fish", which looks like bats</ a></div> </li> <li> <div class="mode"><h2><a href="javascript: void (0);">Global University Rankings</a></h2><font>3029</font></div> <div class="show"><a href="#">Harvard was the first university to lose the top ranking, and Peking University and Tsinghua University were among the top 100</ a></div> </li> </ul> </div>