Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
更新時(shí)間:2014年02月12日 09:37:32 作者:
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
實(shí)例如下所示:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(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)過(guò)彈出層且可以點(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),下面也通過(guò)用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了,需要的朋友可以參考下。2010-08-08淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery $("#variable") 循環(huán)改變variable的值示例
這篇文章主要介紹了jquery $("#variable")如何循環(huán)改變variable的值,需要的朋友可以參考下2014-02-02jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法
本篇文章主要是對(duì)jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)
這篇文章主要介紹了greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)2007-02-02jQuery制作網(wǎng)頁(yè)版選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁(yè)版選項(xiàng)卡的相關(guān)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07使用jQuery Ajax功能時(shí)需要注意的一個(gè)問(wèn)題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來(lái)越火,用它的人也越來(lái)越多。jQuery最強(qiáng)大的亮點(diǎn)莫過(guò)于它的CSS3 selector和極其簡(jiǎn)單的Ajax請(qǐng)求調(diào)用2012-05-05