多次設置偏移屬性會導致元素跳轉到jQuery中的新位置

Question

我試圖創建類似於jQuery工具提示的效果。

我正在重複使用相同的<div>元素（id="tooltip"）來顯示工具提示。因此，每次用戶將光標移動到應顯示工具提示的元素上時，我都需要不斷移動此元素。當我使用offset()屬性時，它首次正常工作，但如果將鼠標從一個圖標重複移動到另一個圖標，工具提示將跳轉到不同的位置。

您可以在這裏嘗試一下：

http://jsfiddle.net/ZbwjQ/2/

嘗試從一個圖標移動鼠標到其他反反覆覆，你會發現，提示跳躍周圍不正確。它應該總是立即顯示在懸停的圖標的右側。

Answer 1

你的代碼有幾個問題。

的div不是自閉標籤：

<div />  <!-- Wrong --> 
<div></div> <!-- Good --> 

當你有空白的div元素，在CSS中添加以下聲明，以確保他們有一個身體：

div { 
    content: ""; 
} 

jQuery的offset()功能似乎越野車在你的情況下，因爲你的隱藏#tooltip。喜歡下面的代碼來改變其偏移：

$('#tooltip').css({ 
    top: o.top, 
    left: o.left 
}); 

此外，o的創作似乎很沒用。你只需要直接修改offset變量：最後

var offset = $(this).offset(); 
offset.left += $(this).width(); 
$('#tooltip').css({ 
    top: offset.top, 
    left: offset.left 
}); 

，儘量不要訪問多次的相同元素與選擇。每次調用jQuery時，jQuery都必須在整個DOM樹中找到您的元素。

var tooltip = $("#tooltip"); // Use it in mousenter/mouseleave => Avoids 2 useless selections 

// In your mousenter function 
var el = $(this); // Use "el" to get offset/width => 1 useless selection avoided 

你可以找到一個工作jsfiddle here。

Answer 2

我有幾天進入JQuery和JavaScript，我的自制工具提示偶爾跳到屏幕的奇怪區域。跟蹤Joomla在調試位置的位置變量，我看不到任何問題，工具提示被告知去正確的位置。它不會一直乖乖的去那裏。我看到這篇文章，它很有道理，所以我爲不止一次調用的選擇器創建了變量。甚至沒有使用CSS來設置位置，所以我仍然使用偏移量。儘管如此，跳躍問題已經徹底解決了，我無法讓工具提示的位置再次變得不合時宜。就像你對新人所期望的那樣，浪費了一些時間，但是我一直會在開始時聲明變量。此外，這就是我們在Delphi中做到的。

Answer 3

當元素被隱藏時，Jquery函數.offset()無法正常工作。看帖子：jquery: get the offset of hidden element