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


Posted in Javascript onFebruary 07, 2012

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>
Javascript 相关文章推荐
使用js操作cookie的一点小收获分享
Sep 03 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
javascript每日必学之运算符
Feb 16 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 #Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 #Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 #Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 #Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 #Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 #Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php fread读取文件注意事项
2016/09/24 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python numpy 常用函数总结
2017/12/07 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
继承公证书
2014/04/09 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
求职简历自我评价范文
2015/03/10 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技