Gift giving module imitating QQ space personal center

Gift giving module imitating QQ space personal center: Demo Demo

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

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

CSS code:

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

 <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="#"> Tuoyuan Network </a></div><div class="head_songli"><a href="#">Gifts</a></div> <div class="head_date">The day after September 14</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="#">Birthday cake</a></h3> <span>A birthday cake for you</span> <span><a href="#">Here you go</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="#">Tuoyuan</a></div><div class="head_songli"><a href="#">Gifts</a></div> <div class="head_date">The day after September 14</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="#">Cheese cake</a></h3> <span>Cheese cake, you want to eat as soon as you guess~</span> <span><a href="#">Here you go</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="#">Tuoyuan</a></div><div class="head_songli"><a href="#">Gifts</a></div> <div class="head_date">The day after September 14</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="#">Love Cake</a></h3> <span>Send you my sincere love</span> <span><a href="#">Here you go</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="#">Tuoyuan</a></div><div class="head_songli"><a href="#">Gifts</a></div> <div class="head_date">The day after September 14</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="#">Happy Chocolate</a></h3> <span>Are you happy to know that you love chocolate</span> <span><a href="#">Here you go</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="#">Tuoyuan</a></div><div class="head_songli"><a href="#">Gifts</a></div> <div class="head_date">The day after September 14</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="#">Delicious childhood</a></h3> <span>Let's recall the delicious childhood together</span> <span><a href="#">Here you go</a></span> </div> </div> </li> </ul> </div>