javascript - 在另一个内容上设置 Div 位置

Question

我有一个包含文本的页面内容。在内容下方，有一个导航栏，我希望每当我将鼠标悬停在导航器中的某个元素时，一个 div 将在我刚刚悬停的元素上方打开，并显示一些内容。

我不希望弹出的 DIV 将任何对象推送到页面上，我希望它是，就像在页面上的所有对象上一样。

some code since I have to insert code tags if I want to post fiddle

这里有一个 fiddle 来演示:

Click here for fiddle

在 fiddle 中，我希望每当我将鼠标悬停在 First 上时，第一个反馈将显示在他的正上方。

这几乎是我的代码，我刚刚使用 jQuery 来计算我想要的宽度，但我就是无法让 div 高于他应该高于的 div。我不能只靠肉眼计算并说出多少像素，因为该网站非常动态，所以我每次都需要一个公式来计算它。

如果您有任何代码建议，例如重新定位反馈 div，请随时编辑 fiddle !

提前致谢!

Answer 1

更新: 好的，我按照您指定的方式完成了:http://jsfiddle.net/2U7jB/3/ .还有其他方法可以做到这一点 - 这取决于您的 HTML。

原始响应:这接近您想要的:http://jsfiddle.net/2U7jB/2/

.popup {
    display: none;
    height: 35px;
    width: 100%;
    background-color: blue;
}

<div id="first">
    <div class="popup"></div>
</div>
<div id="second">
    <div class="popup"></div>
</div>
<div id="third">
    <div class="popup"></div>
</div>

$('#first, #second, #third').on('mouseover', function() {
    $(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
    $(this).children('.popup').hide();
});

要得到你想要的，只需在#first、#second 和#third 中创建两个 div - 第一个 div 用于隐藏(弹出)内容，第二个 div 用于导航菜单/背景颜色。