javascript - Bootstrap : In Navbar, 根据李链接悬停在一个位置显示不同的内容？

Question

我已经尝试了一些 JQuery 和 CSS 实现，但似乎不太正确。我在 Bootstrap 的导航栏中使用 FontAwesome 图标，我希望有一个位置，当图标悬停时，会显示/隐藏它们的文本描述。

这个实现让我走得最远，显示了不同的标题。但是，我需要它们全部出现在一个位置(最好是在 ul navbar-nav 分组的前面，因为它们将右对齐)。

CSS:

div#navbar a span {display: none;}

div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}

HTML:

<ul class="nav navbar-nav">
        <li><a href="#about" class="nav-button-bg nav1"><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></a></li>
        <li><a href="#about" class="nav-button-bg nav2"><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></a></li>
        <li><a href="#about" class="nav-button-bg nav3"><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></a></li>
</ul>

上面的实现基于 MeyerWeb 的 CSS Popup Demo

我已经尝试过适用于简单类/链接的 JQuery Fiddles，例如:http://jsfiddle.net/AstroCB/42gV5/ ，但我不确定 Bootstrap 类的深度是否导致某种覆盖，因为我似乎无法根据我见过的示例获得 JQuery 显示/隐藏功能。

我也试过~关系如:http://jsfiddle.net/YsHA4/但我又碰壁了。

很可能我只是以错误的方式处理这个问题，但几天来我一直在尝试解决这个问题，但似乎找不到解决方案。绝对感谢一双全新的眼睛和任何帮助。如果有任何我可以澄清的方法，请告诉我。谢谢!!

编辑添加:我不需要最终结果在任何方面都跨越链接内部，它们可以隐藏在外部 div 等中。我给出的示例是我所管理的最远的示例获得我想要的功能(每次悬停显示单独的信息)，但是如果使用 JS/etc 的不同方法删除跨度或以某种方式将文本硬编码为 JS 字符串，那就这样吧。我只是想让这个功能像预期的那样与 Bootstrap 一起工作，无论哪种实现最好!

此外，请参阅我的评论以了解我正在努力实现的目标的图像表示。

Answer 1

我做了一个Fiddle根据你的形象。它使用 Bootstrap 右侧的菜单部分。

我已经对每个链接应用了一个循环:

$.each($('a'), function() {
    $(this).hover(function() {
        $('.placeholder').html($(this).html());
    });
});

它只是将 HTML 放在一个标签内，并将其放置在带有 placeholder 类的菜单项中。

更新:

在您的情况下，您的链接有点复杂，因此循环的选择器看起来像这样:

$.each($('a > span'), function() {
    // do stuff here
});

这会获取文档中的所有链接，然后获取其中的 span 元素。

Aaand finally a Fiddle对于您在此处提供的 HTML。

由于循环是不必要的，所以编辑了下面的代码:

$('a').hover(function() {
    $('.placeholder').html($(this).html());
});

$('a > span').hover(function() {
    // do stuff here
});