快捷導(dǎo)航

Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊

更新時間：2014年02月12日 09:37:32 作者：

這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊。需要的朋友可以過來參考下，希望對大家有所幫助

實例如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊</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組件添加右鍵菜單功能的簡單實例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jquery實現(xiàn)商品sku多屬性選擇功能（商品詳情頁）
這篇文章主要介紹了jquery實現(xiàn)商品sku多屬性選擇功能（商品詳情頁）,文中簡單給大家介紹了sku的概念，需要的朋友可以參考下
2019-12-12
jQuery中$.each使用詳解
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下
2015-01-01
c#+jquery實現(xiàn)獲取radio和checkbox的值
這篇文章主要介紹了c#結(jié)合jquery實現(xiàn)獲取radio和checkbox的value值的方法，將代碼分享給大家,需要的朋友可以參考下
2014-12-12
以WordPress為例講解jQuery美化頁面Title的方法
鼠標(biāo)移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下
2016-05-05
基于jquery的二級聯(lián)動菜單實現(xiàn)代碼
基于jquery的二級聯(lián)動菜單實現(xiàn)代碼，腳本之家簡單整理了幾種。需要的朋友可以參考下，主要是思路
2011-04-04
jQuery ztree實現(xiàn)動態(tài)樹形多選菜單
這篇文章主要介紹了jQuery ztree實現(xiàn)動態(tài)樹形多選菜單，ztree動態(tài)樹形菜單，初始化加載和延遲加載，感興趣的小伙伴們可以參考一下
2016-08-08
easyUI實現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼
本篇文章主要介紹了easyUI實現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2016-12-12
jQuery+css實現(xiàn)的時鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實現(xiàn)的時鐘效果,使用js的setTimeout方法實時修改頁面元素,實現(xiàn)動態(tài)顯示時鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下
2016-01-01
jQuery時間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時間戳和日期相互轉(zhuǎn)換操作,結(jié)合實例形式分析了jQuery針對日期與時間戳的轉(zhuǎn)換、運算相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12