jquery中的mouseleave和mouseout的区别模仿下拉框效果

150 阅读 0 评论 99 点赞

我是靠谱客的博主怡然皮带，最近开发中收集的这篇文章主要介绍jquery中的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> 