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跨Iframe選擇實(shí)現(xiàn)代碼
JQuery跨Iframe選擇實(shí)現(xiàn),下面也通過用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了，需要的朋友可以參考下。2010-08-08
很多朋友都反應(yīng)jquery mobile自帶的圖標(biāo)真的是少之又少，另外我也覺得圖標(biāo)偏小(系統(tǒng)自帶的是18*18的），于是琢磨著如何自定義按鈕圖標(biāo)，下面小編把我的方法分享在腳本之家平臺(tái)供大家借鑒2015-11-11
淺談jquery點(diǎn)擊label觸發(fā)2次的問題
下面小編就為大家?guī)硪黄獪\談jquery點(diǎn)擊label觸發(fā)2次的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
對(duì)直接的DOM操作進(jìn)行限制2009-05-05
jquery $("#variable") 循環(huán)改變variable的值示例
這篇文章主要介紹了jquery $("#variable")如何循環(huán)改變variable的值,需要的朋友可以參考下2014-02-02
本篇文章主要是對(duì)jquery.ajax的url中傳遞中文亂碼問題的解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了greybox——不開新窗口看新的網(wǎng)頁2007-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁版選項(xiàng)卡的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對(duì)xml數(shù)據(jù)的遍歷與節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
使用jQuery Ajax功能時(shí)需要注意的一個(gè)問題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來越火，用它的人也越來越多。jQuery最強(qiáng)大的亮點(diǎn)莫過于它的CSS3 selector和極其簡單的Ajax請(qǐng)求調(diào)用2012-05-05