如何在链接上显示我的链接显示一个小透明框？

Question

我想显示一个类似于此的小工具提示：

当我把鼠标放在它上面时，会出现一个小黑框。我怎样才能做到这一点？是使用jQuery还是MooTools还是什么？

感谢这位初学网页设计师！

Answer 1

我认为你可以用CSS做，不需要Javascript。

默认情况下，黑匣子（工具提示）可以是绝对定位的孩子display: none，而:hover则可以显示它。

这是little demo。

示例CSS：

.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }

用于HTML（在没有CSS的情况下仍然可读！）：

<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​

此方法适用于所有现代浏览器和IE＆gt; = 7. IE6仅支持链接上的:hover选择器，因此如果要支持它，则需要使用a元素（或找到不同的解决方法）。

Answer 2

这是通过JavaScript完成的。我建议使用jQuery框架，因为有大量不同的jQuery Tool Tip插件可供您使用。

For example.

Answer 3

使用jQuery，假设你有一个像这样格式正确的div :(注意这是一个非常简单的例子。我没有定义类来正确格式化元素或类似的东西）

<a href="AcornsUsage.html" class="acornsremaining">3</a>

和

<div class="onmouseoverpopup parent">
 <div class="onmouesoverpopup arrowontopmiddle"></div>
 <div class="onmouesoverpopup text">Acorns remaining</div>
</div>

你可能会做这样的事情

$(document).ready( function() {
  $(".acornsremaining").hover( function() {
    $(".onmouseoverpopup.parent").show();
  }, function() { 
    $(".onmouseoverpopup.parent").hide();
  });
});

Answer 4

绝对看起来像Tipsy，我用过的jQuery插件。