仿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代码：

* { margin:0; padding:0; }
body { margin:0; padding:0; font-size:12px; }
a { font-size:12px; text-decoration:none; color:#06c; }
.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; 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://www.toyean.com/zb_users/avatar/0.png"></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://www.toyean.com/zb_users/avatar/0.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://www.toyean.com/zb_users/avatar/0.png"></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://www.toyean.com/zb_users/avatar/0.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://www.toyean.com/zb_users/avatar/0.png"></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://www.toyean.com/zb_users/avatar/0.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://www.toyean.com/zb_users/avatar/0.png"></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://www.toyean.com/zb_users/avatar/0.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://www.toyean.com/zb_users/avatar/0.png"></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://www.toyean.com/zb_users/avatar/0.png"></div>
                <div class="gift_info">
                    <h3><a href="#">美味童年</a></h3>
                    <span>让我们一起回忆美味的童年</span>
                    <span><a href="#">就送这个</a></span>
                </div>
            </div>
        </li>
    </ul>
</div>