mouseover,mouseout相关问题


<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")
})
为什么鼠标移动到新增的<span class=\"ccd\" v="+p+">333</span>会出发mouseout事件

解决方案 »

  1.   

     $('.all_friend').mouseleave
    参考下
    http://www.w3school.com.cn/jquery/event_mouseleave.asp
      

  2.   

    thx,待会给分，还要用上mouseenter 
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var mouseX;
    var mouseY;
    $(document).bind("contextmenu", function (e) { //去掉默认右键功能
    return false;
    });
    $(document).mousedown(function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    if (3 == e.which) { //右键单击
    $("#area").css('margin-left', mouseX);
    $("#area").css('margin-top', mouseY);
    $("#area").show();
    } else if (1 == e.which && !($('#area').find(e.target).length != 0 || $('#area')[0] == $(e.target)[0])) { //左键单击
    $("#area").hide();
    }
    return
    })
     
    }) 
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div> 
    <div id="area" style="width:150px; height:200px; background-color:red; display:none;" >
    <input type="button" value="我是按钮" onmousedown="alert('11');" />
    </div>
    </div>
    </form>
    </body>
    </html>
    你是想说鼠标右键功能吧
      

  4.   

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