<div class="group_list">
    <div class="all_friend" v="1">
         <span class="qbhy" v="1">全部好友</span>
         <span class="hysl" v="1">(123)</span>
    </div>
</div>

.all_friend{float:left; width:160px; height:25px;margin-top:11px; display:inline}
.qbhy{float:left; width:auto; height:12px; line-height:12px; margin-top:6px; display:inline; margin-left:15px}
.hysl{float:left; width:auto; height:12px; line-height:12px; margin-left:2px; color:#74a18c;margin-top:6px;}
.fri_cur{ background:#e6d9c6; cursor:pointer; }

//分组过度效果
            
            $('.all_friend').mouseover(function(){
                        var str="";
                        $(this).addClass('fri_cur')
               var p=$(this).attr('v');
                     str+="<span class=\"ccd\" v="+p+">333</span>"
                        $('.hysl[v='+p+']').after(str);
                        
                        console.log("222")
                        
            })
            
            $('.all_friend').mouseout(function(){
                            var p=$(this).attr('v');
                            $('.all_friend[v='+p+']').removeClass('fri_cur');        
                             $('.ccd[v='+p+']').remove();
                            console.log("23332")
            })