当前位置: 代码迷 >> .NET相关 >> jQ中的mouseleave跟mouseout的区别 模仿下拉框效果
  详细解决方案

jQ中的mouseleave跟mouseout的区别 模仿下拉框效果

热度:209   发布时间:2016-04-24 02:35:38.0
jQ中的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>