手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery中的mouseleave和mouseout的区别 模仿下拉框效果
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
摘要:1.不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。2.只有在鼠标指针离开被选元素时,才会触发mouseleave事件...

1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

复制代码 代码如下:

<div>

<input type="button" value="请选择所属部门" id="sel_dept" />

<div id="sel_dept_sh">

<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>

【jquery中的mouseleave和mouseout的区别 模仿下拉框效果】相关文章:

javascript基于DOM实现省市级联下拉框的方法

javascript实现带下拉子菜单的导航菜单效果

Jquery中基本选择器用法实例详解

jquery实现弹出层效果实例

JQuery中上下文选择器实现方法

javaScript中slice函数用法实例分析

JavaScript中停止执行setInterval和setTimeout事件的方法

Javascript中setTimeOut和setInterval的定时器用法

jquery实现点击label的同时触发文本框点击事件的方法

Javascript调用XML制作连动下拉列表框

精品推荐
分类导航