mouseover,mouseout相关有关问题 _JavaScript

mouseover,mouseout相关问题

HTML code


<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>

CSS code


.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; }

JScript code


//分组过度效果
            
            $('.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")
            })

为什么鼠标移动到新增的<span class=\"ccd\" v="+p+">333</span>

会出发mouseout事件

------解决方案--------------------
$('.all_friend').mouseleave

参考下
http://www.w3school.com.cn/jquery/event_mouseleave.asp

------解决方案--------------------
wo gang ka我刚看了以下为什么会发生这个事件；我分析以下哈，待楼主自己测试。你的外面的那个all_friend的高度为25px；然后你的里面2个span加起来等于24px;你添加了一个span而且有个样式，估计也有高度。所以你3个span超过了父元素DIV 而不会撑开。所以span已经超出了div元素，所以就触发了移出事件，不知道对不对。楼主把div的高度设置大点 all_friend==div