jQ中的mouseleave和mouseout的區別 模仿下拉框效果

1.不論滑鼠指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。

2.只有在滑鼠指針離開被選元素時，才會觸發 mouseleave 事件。

<div class="sel_box">
    <input type="button" value="請選擇所屬部門" id="sel_dept" />
    <div class="hide" id="sel_dept_sh" style="display: none;">
        <p>
           <font>深圳市公司 </font>
        </p>
        <p>
            <font>集團管理層 </font>
        </p>
    </div>
</div>

<script type="text/javascript">
$(".sel_box").click(function(event){
     if(event.target.id == 'sel_dept'){
         $("#sel_dept_sh").show(); //顯示下拉框
         $("#sel_dept_sh p font").click(function(){
             $("#sel_dept").val('');
             var text = $(this).text();
            // alert(text);
             $("#sel_dept").val(text).css("color","#000");
             $("#sel_dept_sh").hide();
         });

     }else{
         $("#sel_dept_sh").hide();
     }
     

});

$(".sel_box").bind("mouseleave",function(){//用mouseleave就實現了模仿下拉框的效果
        $(this).find(".hide").hide();    
    });

$(".sel_box").bind("mouseout",function(){//而mouseout則不行，什麼時候都會觸發
        $(this).find(".hide").hide();    
    });
</script>