仿QQ空间个人中心送礼模块

仿QQ空间个人中心送礼模块: Demo演示

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

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

CSS代码：

.user_list { width:170px; margin:auto; border:1px #ccc solid; overflow:hidden; zoom:1; }
.user_list ul { list-style:none; }
.user_list ul li { width:160px; float:left; padding:5px; border-bottom:1px #ccc solid; }
.user_list ul li .head_img { width:35px; padding:3px 8px 0 0; float:left; }
.user_list ul li .head_img img { width:35px; height:35px; }
.user_list ul li .head_info { width:115px; float:left; line-height:20px; }
.user_list ul li .head_name { width:88px; float:left; }
.user_list ul li .head_songli { width:24px; float:left; }
.user_list ul li .head_date { width:96px; padding-left:18px; background:url(https://www.toyean.com/tt/images/setting.gif) no-repeat 0 3px; color:#999; float:left; }
.user_list ul li .head_hover { width:155px; border:1px #ccc solid; margin:2px; float:left; display:none; }
.user_list ul li .gift_img { width:65px; float:left; padding:5px; }
.user_list ul li .gift_img img { width:65px; height:65px; }
.user_list ul li .gift_info { width:80px; float:left; line-height:18px; padding:3px 0; padding-bottom:0; }
.user_list ul li .gift_info h3 a { color:#06c; font-size:12px; }
.user_list ul li .gift_info span { width:80px; float:left; }
.user_list ul li.active .head_hover { display:block; }

HTML代码：

<div class="user_list">
<ul>
<li>
<div class="user_gift">
<div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>
<div class="head_info">
<div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div>
<div class="head_date">九月十四 后天</div>
</div>
</div>
<div class="head_hover">
<div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/13/64413.png" /></div>
<div class="gift_info">
<h3><a href="#">生日蛋糕</a></h3>
<span>为你准备的生日蛋糕</span>
<span><a href="#">就送这个</a></span>
</div>
</div>
</li>

<li>
<div class="user_gift">
<div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>
<div class="head_info">
<div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div>
<div class="head_date">九月十四 后天</div>
</div>
</div>
<div class="head_hover">
<div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/14/65182.png" /></div>
<div class="gift_info">
<h3><a href="#">芝士蛋糕</a></h3>
<span>芝士蛋糕，一猜你就想吃~</span>
<span><a href="#">就送这个</a></span>
</div>
</div>
</li>

<li>
<div class="user_gift">
<div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>
<div class="head_info">
<div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div>
<div class="head_date">九月十四 后天</div>
</div>
</div>
<div class="head_hover">
<div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/4/64644.png" /></div>
<div class="gift_info">
<h3><a href="#">爱心蛋糕</a></h3>
<span>为你送上我真挚的爱心</span>
<span><a href="#">就送这个</a></span>
</div>
</div>
</li>

<li>
<div class="user_gift">
<div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>
<div class="head_info">
<div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div>
<div class="head_date">九月十四 后天</div>
</div>
</div>
<div class="head_hover">
<div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/10/64970.png" /></div>
<div class="gift_info">
<h3><a href="#">开心巧克力</a></h3>
<span>知道你爱吃巧克力，开心吗</span>
<span><a href="#">就送这个</a></span>
</div>
</div>
</li>

<li>
<div class="user_gift">
<div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div>
<div class="head_info">
<div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div>
<div class="head_date">九月十四 后天</div>
</div>
</div>
<div class="head_hover">
<div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/13/65405.png" /></div>
<div class="gift_info">
<h3><a href="#">美味童年</a></h3>
<span>让我们一起回忆美味的童年</span>
<span><a href="#">就送这个</a></span>
</div>
</div>
</li>

</ul>
</div>