jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
更新時(shí)間：2012年02月07日 14:28:08 作者：
不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件
1.不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。
2.只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。
<div class="sel_box">
<input type="button" value="請(qǐng)選擇所屬部門" id="sel_dept" />
<div class="hide" id="sel_dept_sh" style="display: none;">
<p>
<font>深圳市公司 </font>
</p>
<p>
<font>集團(tuán)管理層 </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就實(shí)現(xiàn)了模仿下拉框的效果
$(this).find(".hide").hide();
});
$(".sel_box").bind("mouseout",function(){//而mouseout則不行，什么時(shí)候都會(huì)觸發(fā)
$(this).find(".hide").hide();
});
</script>
2.只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。
復(fù)制代碼 代碼如下:
<div class="sel_box">
<input type="button" value="請(qǐng)選擇所屬部門" id="sel_dept" />
<div class="hide" id="sel_dept_sh" style="display: none;">
<p>
<font>深圳市公司 </font>
</p>
<p>
<font>集團(tuán)管理層 </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就實(shí)現(xiàn)了模仿下拉框的效果
$(this).find(".hide").hide();
});
$(".sel_box").bind("mouseout",function(){//而mouseout則不行，什么時(shí)候都會(huì)觸發(fā)
$(this).find(".hide").hide();
});
</script>
相關(guān)文章
jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery定時(shí)隱藏對(duì)話框的相關(guān)函數(shù)、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2018-02-02
jQuery插件dataTables添加序號(hào)列的方法
這篇文章主要介紹了jQuery插件dataTables添加序號(hào)列的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07
jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
jPlayer是一個(gè)JavaScript寫的完全免費(fèi)和開源的jQuery多媒體庫插件，這篇文章主要介紹了基于jPlayer三分屏的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
基于Jquery制作的幻燈片圖集效果，文章最后給出了打包下載地址，喜歡的朋友可以測(cè)試下。2011-02-02
Jquery：ajax實(shí)現(xiàn)翻頁無刷新功能代碼
ajax實(shí)現(xiàn)翻頁在實(shí)際應(yīng)用中還是比較常見的，實(shí)現(xiàn)ajax翻頁有兩部分：js部分、html部分，具體如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
這篇文章主要介紹了EasyUI Tree樹組件無限循環(huán)的解決方法,需要的朋友可以參考下2017-09-09
Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié)
這篇文章主要介紹了Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié),本文總結(jié)的比較簡(jiǎn)潔直白,看到的朋友按需索取,需要的朋友可以參考下2015-04-04
jquery入門——事件機(jī)制之事件中的冒泡現(xiàn)象示例解釋
事件被觸發(fā)后被分為兩個(gè)階段，一個(gè)是捕獲（Capture），另一個(gè)是冒泡(Bubbing)，但大多瀏覽器并不是都支持捕獲階段，因此事件被觸發(fā)后，往往執(zhí)行冒泡過程,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)事件機(jī)制有所幫助2013-02-02
今天小編就為大家分享一篇關(guān)于AJAX在JQuery中的應(yīng)用詳解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01