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>

?

轉載于:https://www.cnblogs.com/1haojia/archive/2012/02/06/2340111.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的jQ中的mouseleave和mouseout的区别 模仿下拉框效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。