Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊
更新時(shí)間：2014年02月12日 09:37:32 作者：
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
實(shí)例如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊</title>
<script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ps = $("#div_pro").position();
$("#float_box").css("position", "absolute");
$("#float_box").css("left", ps.left + 20); //距離左邊距
$("#float_box").css("top", ps.top + 20); //距離上邊距
$("#div_pro").mouseenter(function () {
$("#float_box").show();
});
$("#float_box").mouseleave(function () {
$("#float_box").hide();
});
})
</script>
</head>
<body>
<div>
<a href="#" id="div_pro">廣東省</a>
</div>
<div id="float_box" style="display:none;">
<a href="#">深圳市</a>
<a href="#">廣州市</a>
<a href="#">東莞市</a>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊</title>
<script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ps = $("#div_pro").position();
$("#float_box").css("position", "absolute");
$("#float_box").css("left", ps.left + 20); //距離左邊距
$("#float_box").css("top", ps.top + 20); //距離上邊距
$("#div_pro").mouseenter(function () {
$("#float_box").show();
});
$("#float_box").mouseleave(function () {
$("#float_box").hide();
});
})
</script>
</head>
<body>
<div>
<a href="#" id="div_pro">廣東省</a>
</div>
<div id="float_box" style="display:none;">
<a href="#">深圳市</a>
<a href="#">廣州市</a>
<a href="#">東莞市</a>
</div>
</body>
</html>
相關(guān)文章
為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jquery實(shí)現(xiàn)商品sku多屬性選擇功能（商品詳情頁）
這篇文章主要介紹了jquery實(shí)現(xiàn)商品sku多屬性選擇功能（商品詳情頁）,文中簡(jiǎn)單給大家介紹了sku的概念，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
c#+jquery實(shí)現(xiàn)獲取radio和checkbox的值
這篇文章主要介紹了c#結(jié)合jquery實(shí)現(xiàn)獲取radio和checkbox的value值的方法，將代碼分享給大家,需要的朋友可以參考下2014-12-12
以WordPress為例講解jQuery美化頁面Title的方法
鼠標(biāo)移動(dòng)到超鏈接時(shí)顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下2016-05-05
基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼
基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼，腳本之家簡(jiǎn)單整理了幾種。需要的朋友可以參考下，主要是思路2011-04-04
jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹形多選菜單
這篇文章主要介紹了jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹形多選菜單，ztree動(dòng)態(tài)樹形菜單，初始化加載和延遲加載，感興趣的小伙伴們可以參考一下2016-08-08
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12
jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的時(shí)鐘效果,使用js的setTimeout方法實(shí)時(shí)修改頁面元素,實(shí)現(xiàn)動(dòng)態(tài)顯示時(shí)鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下2016-01-01
jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12