jquery中的mouseleave和mouseout的区别 模仿下拉框效果
更新时间：2012年02月07日 14:28:08 作者：
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件,只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
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>
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>
相关文章
这篇文章主要介绍了jQuery实现定时隐藏对话框的方法,结合实例形式较为详细的分析了jQuery定时隐藏对话框的相关函数、实现方法与操作注意事项,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了jQuery插件dataTables添加序号列的方法的相关资料,需要的朋友可以参考下2016-07-07
jquery异常问题Uncaught TypeError: $(...).on is not a funct
这篇文章主要介绍了jquery异常问题Uncaught TypeError: $(...).on is not a function，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
jPlayer是一个JavaScript写的完全免费和开源的jQuery多媒体库插件，这篇文章主要介绍了基于jPlayer三分屏的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
基于Jquery制作的幻灯片图集效果，文章最后给出了打包下载地址，喜欢的朋友可以测试下。2011-02-02
ajax实现翻页在实际应用中还是比较常见的，实现ajax翻页有两部分：js部分、html部分，具体如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了EasyUI Tree树组件无限循环的解决方法,需要的朋友可以参考下2017-09-09
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
这篇文章主要介绍了Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结,本文总结的比较简洁直白,看到的朋友按需索取,需要的朋友可以参考下2015-04-04
事件被触发后被分为两个阶段，一个是捕获（Capture），另一个是冒泡(Bubbing)，但大多浏览器并不是都支持捕获阶段，因此事件被触发后，往往执行冒泡过程,感兴趣的朋友可以了解下，或许对你学习事件机制有所帮助2013-02-02
今天小编就为大家分享一篇关于AJAX在JQuery中的应用详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最新评论