0

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

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

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

这是一个要演示的小提琴：

单击此处获取小提琴

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

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

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

提前致谢！

4

1 回答 1

0

更新：好的，我按照您指定的方式进行了操作：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 用于导航菜单/背景颜色。

于 2013-03-10T23:26:49.747 回答