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 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
javascript中万恶的function实例分析
May 25 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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下使用无限生命期Session的方法
2007/03/16 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
javascript 函数使用说明
2010/04/07 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python机器学习之神经网络实现
2018/10/13 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
手机银行营销方案
2014/03/14 职场文书
应届生求职信范文
2014/06/30 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python