將鼠標懸停在鏈接旁邊時如何創建彈出框？

Question

這是我要實現的：

我在網頁上顯示了兩個超鏈接：

<a href="http://foo.com"> foo </a>

<a href="http://bar.com"> bar </a>

而且我對div的鏈接也有兩個描述：

<div id="foo">foo means foo</div>

<div id="bar">bar means bar</div>

現在，當我將鼠標懸停在foo的鏈接上時，應該彈出相應的描述div，並且應該在光標所在的位置旁邊彈出它。

因此，如果我將鼠標懸停在“ foo”上，則包含“ foo意味着foo”的彈出框應出現在鼠標光標旁邊。 同樣的情況適用於“酒吧”。

請使用javascript / jquery，CSS或它們的組合，展示一種實現此目的的快速簡單的方法。

PS抱歉，我之前並沒有明確解釋，實際上我想在description div中添加更多鏈接或圖像，而不是純文本，因此常規的工具提示可能不會。

謝謝。

Answer 1

這是最簡單的解決方案。

HTML：

<a href="http://foo.com" data-tooltip="#foo">foo</a>
<a href="http://bar.com" data-tooltip="#bar">bar</a>

<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>

CSS：

div {
    position: absolute;
    display: none;
    ...
}​

JavaScript：

$("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});

 $("a").hover(function(e) { $($(this).data("tooltip")).css({ left: e.pageX + 1, top: e.pageY + 1 }).stop().show(100); }, function() { $($(this).data("tooltip")).hide(); }); 

 div { position: absolute; display: none; border: 1px solid green; padding:5px 15px; border-radius: 15px; background-color: lavender; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <a href="http://foo.com" data-tooltip="#foo">foo</a> <a href="http://bar.com" data-tooltip="#bar">bar</a> <div id="foo">foo means foo</div> <div id="bar">bar means bar</div> 

演示： http : //jsfiddle.net/8UkHn/

Answer 2

您是否考慮過在這種情況下使用“標題”屬性？

<a href="http://foo.com" title="foo means foo"> foo </a>

看看這是否符合您的需求。

它的作用是，當您將鼠標移到鏈接“ foo”上時，鼠標指針旁邊將出現一個包含“ foo意味着foo”的小框。