jquery中的mouseleave和mouseout的区别模仿下拉框效果
jQuery 区别 效果 模仿 下拉框 mouseout
2023-06-13 09:14:32 时间
1.不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。
2.只有在鼠标指针离开被选元素时,才会触发mouseleave事件。
复制代码代码如下:
2.只有在鼠标指针离开被选元素时,才会触发mouseleave事件。
<divclass="sel_box">
<inputtype="button"value="请选择所属部门"id="sel_dept"/>
<divclass="hide"id="sel_dept_sh"style="display:none;">
<p>
<font>深圳市公司</font>
</p>
<p>
<font>集团管理层</font>
</p>
</div>
</div>
<scripttype="text/javascript">
$(".sel_box").click(function(event){
if(event.target.id=="sel_dept"){
$("#sel_dept_sh").show();//显示下拉框
$("#sel_dept_shpfont").click(function(){
$("#sel_dept").val("");
vartext=$(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 Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery $.each用法详解编程语言
- jQuery核心及其工具详解编程语言
- jQuery事件队列调整方法
- 用jQuery扩展自写的UI导航
- Jquery知识点三jquery表单对象操作
- jquery中eq和get的区别与使用方法
- 推荐10个超棒的jQuery工具提示插件
- jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果
- jQuery遍历-nextUntil()方法以及prevUntil()方法的使用介绍
- jquery层次选择器siblings与nextAll的区别介绍
- Jquery动态进行图片缩略的原理及实现
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jQuery.fn和jQuery.prototype区别介绍
- 深入理解jQuery中live与bind方法的区别
- jQuery中bind,live,delegate与one方法的用法及区别解析
- jQuery在iframe中无法弹出对话框的解决方法
- JQuery中阻止事件冒泡几种方式及其区别介绍
- JQuery与JS里submit()的区别示例介绍
- jquery跟js初始化加载的多种方法及区别介绍
- 三种动态加载js的jquery实例代码另附去除js方法
- PHP+jquery实时显示网站在线人数的方法
- jQuery和AngularJS的区别浅析