mouseover,mouseout相关有关问题-JavaSript-爱易网页

mouseover,mouseout相关有关问题

日期：2014-05-16　浏览次数：20442 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

mouseover,mouseout相关有关问题

相关资料更多>

推荐阅读更多>