jquery - 多次设置 offset 属性会导致元素跳转到 jQuery 中的新位置

Question

我正在尝试使用 jQuery 创建类似于工具提示的效果。

我正在重复使用相同的 <div>元素 ( id="tooltip" ) 显示工具提示。因此，我需要不断地移动这个<div>每次用户将光标移动到应显示工具提示的元素上时。当我使用offset()时属性，第一次它工作正常，但如果我反复将鼠标从一个图标移动到另一个图标，工具提示就会开始跳转到不同的位置。

您可以在这里尝试一下:

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

尝试将鼠标从一个图标反复移动到另一个图标，您会发现工具提示不正确地跳转。它应该始终立即出现在悬停在其上的图标的右侧。

Answer 1

您的代码中有几个问题。

Div 不是自闭合标签:

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

当您有空 div 时，请在 CSS 中添加以下声明以确保它们具有正文:

div {
  content: "";
}

由于隐藏的#tooltip，jQuery offset() 函数在您的情况下似乎有问题。最好使用以下代码来更改其偏移量:

$('#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 时，它都必须在整个 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 .