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