Javascript 如何让我的链接在：悬停上显示一个透明的小框？

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

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

---

感谢这一开始的网页设计师

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

---

我想你可以用CSS来完成，不需要Javascript

默认情况下，黑框（工具提示）可以是绝对定位的子项，显示方式为

display:none

，在

：hover

上可以显示它

这是一本书

CSS示例：

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

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

3个橡子剩余​

---

这种方法适用于所有现代浏览器和IE>=7。IE6只支持链接上的

：悬停
选择器，因此如果您想支持它（或找到不同的解决方法），则需要使用
a
元素。
使用jQuery，假设您有一个格式正确的div，如下所示：（注意这是一个非常简单的例子。我没有定义类来正确格式化元素或类似的东西）

绝对看起来像是我使用的jQuery插件。
绝对是Javascript。您可能希望重新标记为适当的。是的，他们（很可能）使用带有onmouseover事件挂钩的Javascript（框架）。它不一定是框架（因此上面的参数）但是它确实需要挂上OnMouSever事件。盒子上的箭头也让我认为它可能是一个插件。欢迎来到浏览器和DOM操作的奇妙世界。添加了标签，谢谢！还有更多的注释更清楚吗？你可能想看一下CSS可以完成的，但是它是一个血腥的M。ess…有无数的工具提示插件，选择一个…这里有一个小列表，我以前从未使用过CSS工具提示，但我想它们在传统浏览器上不会很好地降级（IE6，IE7）@Moses:好的是，我将完全无视旧的浏览器，事实上，我将展示一个漂亮的屏幕，让用户可以使用一个好的浏览器。“您可以查看此网站，但它不能与旧浏览器一起使用。请改用此浏览器。”IE7在这里不是问题（使用正确的doctype），只有IE6。它只支持：悬停在链接上。但是如果你想支持它，有一些变通方法。
<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></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();
  });
});