如何使鏈接在a：hover上顯示一個透明小框？

Question

我想顯示一個類似於以下內容的工具提示：

當我將鼠標放在上方時，會出現一個小的黑框。 我該如何實現？ 是使用jQuery還是MooTools還是什么？

感謝這位beginnig網站設計師！

Answer 1

我認為您可以使用CSS做到這一點，而無需使用Javascript。

黑匣子（工具提示）可以是一個帶有display: none的絕對定位的子項display: none默認情況下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仍可讀取！）：

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

此方法將在所有現代瀏覽器和IE> = 7中使用。IE6僅在鏈接上支持:hover選擇器，因此，如果要支持它，則需要使用a元素（或找到其他解決方法）。

Answer 2

這是通過JavaScript完成的。 我建議使用jQuery框架，因為有許多不同的jQuery Tool Tip插件可供您使用。

例如。

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

絕對像我使用的jQuery插件Tipsy 。