jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
更新時(shí)間：2012年02月07日 14:28:08 作者：
不論鼠標(biāo)指針離開(kāi)被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開(kāi)被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件
1.不論鼠標(biāo)指針離開(kāi)被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。
2.只有在鼠標(biāo)指針離開(kāi)被選元素時(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)指針離開(kāi)被選元素時(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)效果比較好的table選中行顏色
這篇文章主要介紹了jquery table選中行顏色實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-03-03
排版也是個(gè)體力活.資源整理自網(wǎng)絡(luò)，送給那些沒(méi)有送藏的童鞋，如果你已經(jīng)收藏過(guò)了，請(qǐng)不要扔磚頭2012-08-08
對(duì)于剛開(kāi)始接觸jquery的朋友是個(gè)不錯(cuò)學(xué)習(xí)參考，對(duì)于一些方法的使用也給出了說(shuō)明。2011-06-06
jQuery實(shí)現(xiàn)有動(dòng)畫(huà)淡出效果的二級(jí)折疊菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)有動(dòng)畫(huà)淡出效果的二級(jí)折疊菜單代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文2018-01-01
使用jquery自定義鼠標(biāo)樣式滿足個(gè)性需求
瀏覽器是有自帶的鼠標(biāo)樣式的，如果某些時(shí)候?yàn)榱吮３质髽?biāo)樣式的統(tǒng)一，或者想指定特定的鼠標(biāo)樣式該怎么辦呢？那就要使用自定義了，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-11-11
jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery選擇器源碼解讀（二）：select方法,本文用詳細(xì)的注釋解讀了select方法的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery元素的隱藏與顯示的方法,實(shí)例分析了hide與show的使用技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04