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