Question

我正在制作一个相当复杂的首页，实质上是一个线索讨论论坛。目前所有功能都有用，但我希望在允许删除，回复，存档和其他功能的消息之后替换链接。目前链接都是文本。我可以使用小图像，使它们看起来更好。然而，在繁忙的首页上有大量的消息和线程，一大堆图像将使整个页面看起来压倒一切。

它现在的工作方式是对函数调用的每次迭代都会从db读取一条消息，这将允许我很好地填充子消息和深度。

这就是我想要做的事情 - 创建一个小的弹出菜单，当有人将鼠标悬停在实际消息上时，该菜单会显示出来。因为当我尝试使用jqueryui菜单小部件时，我当前使用ul和li显示线程消息的方式会破坏格式化。

很抱歉所有的漫无目的但有一种方法可以在消息上方显示一条细长的链接，当有人在它上面悬停时，页面中的每条消息显然都需要有不同的链接[允许blah.php？messageid = ...]。

我一直在关注jqueryui并在很小程度上学习它并仍在阅读教程。有没有办法做我上面提到的事情！

由于

Answer 1

您正在寻找tooltip，Jquery UI有一个tooltip

首先初始化工具提示，此示例为整个文档初始化它。

<script>
  $(function() {
    $( document ).tooltip();
  });
  </script>

然后添加标记并使用title属性指定您希望工具提示的内容。

<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>

Answer 2

一种简单的方法如下：

给定标记

<div class="menu-pop">
    <div class="menu-label">Menu Label</div>
    <div class="menu-items">
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
    </div>
</div>

提供css：

.menu-pop {
    position: relative;
}

.menu-pop .menu-items {
    display: none;
    position: absolute;
}

.menu-pop.dropped .menu-items {
    display:inherit;
}

和一个简单的jquery函数：

$(".menu-pop").hover(
        function() { $(this).addClass("dropped"); }, 
        function() { $(this).removeClass("dropped" ); }
    );

然后......好吧......让它漂亮。

请在此处查看jsfiddle：http://jsfiddle.net/DomDay/rmSHc/

如何在锚点上显示弹出菜单

2 个答案: