[Jquery] 實現鼠標移到某個對象，在旁邊顯示層。

當鼠標移到某個地方的時候，在旁邊飄出一個DIV，離開則消失。

是使用了某位大大封裝的一個函數，稍微改了下。

原文地址： 當鼠標移動上去顯示一個層，在這個對象的旁邊，而且能夠給這個層添加值

效果以下：

函數代碼，放到一個JS文件裏：

/** 
 * 鼠標移上去顯示層 
 * @param divId 顯示的層ID 
 * @returns 
 */  
$.fn.myHoverTip = function(divId) {  
    var div = $("#" + divId); //要浮動在這個元素旁邊的層  
    div.css("position", "absolute");//讓這個層能夠絕對定位  
    var self = $(this); //當前對象  
    self.hover(function() {  
        div.css("display", "block");  
        var p = self.position(); //獲取這個元素的left和top  
        var x = p.left + self.width();//獲取這個浮動層的left  
        var docWidth = $(document).width();//獲取網頁的寬  
        if (x > docWidth - div.width() - 20) {  
            x = p.left - div.width();  
        }  
        div.css("left", x);  
        div.css("top", p.top);  
        div.show();  
    },  
    function() {  
        div.css("display", "none");  
    }  
    );  
    return this;  
}

在哪一個對象旁邊顯示DIV，隨本身定義，只要定義一個ID便可：

如： <a id="viewReInfo" href="#" >查看收件人回執狀況</a>

須要顯示的DIV，根據需求本身定義，一樣只需定義ID便可：

如：<div id="receiptInfo" class="receiptInfo"></div>

調用上面的JS函數，代碼以下：

$('#viewReInfo').myHoverTip('receiptInfo');

完事。哇哈哈，超簡單。感謝原做者無私，強大啊！！