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

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>

赞 (0)

相关推荐

  • 实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

  • jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

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

    1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. 复制代码 代码如下: <div class="sel_box"> <input type="button" value="请选择所属部门" id="sel_dept" /> <div class="hide" id="

  • jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

    jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

    本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>

  • jquery仿QQ登录账号选择下拉框效果

    jquery仿QQ登录账号选择下拉框效果

    QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示

  • JQuery实现级联下拉框效果实例讲解

    JQuery实现级联下拉框效果实例讲解

    用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下 效果图: 逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • jQuery插件实现可输入和自动匹配的下拉框

    实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val

  • jQuery+PHP+MySQL实现无限级联下拉框效果

    jQuery+PHP+MySQL实现无限级联下拉框效果

    本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下  效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Content

  • jQuery自定义多选下拉框效果

    jQuery自定义多选下拉框效果

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如下: 1.效果图 2.代码 <div id="demo" class="dropdown-container"> <div class="dropdown-display"> <span></span>

  • vue+Element中table表格实现可编辑（select下拉框）

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当

  • jQuery使用EasyUi实现三级联动下拉框效果

    其它的都不说,使用easyui实现三级联动主要就是一层套一层,大家且看代码 html表单 <input id="txtPipeRowName" style="width:150px;"> <input id="txtPipeName" style="width:150px;"> easyUi的Combobox: // 一层Combo var srmCombx = $("#txtShouName

随机推荐