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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
javascript实现控制div颜色
Jul 07 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue实现学生信息管理系统
May 30 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
Oracle 常见问题解答
2006/10/09 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python实现发送邮件功能代码
2017/12/14 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
难忘的一天教学反思
2014/04/30 职场文书
公司承诺书格式
2014/05/21 职场文书
新农村建设典型材料
2014/05/31 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
MySQL创建表操作命令分享
2022/03/25 MySQL