8

这是我想要实现的：

我有两个显示在网页上的超链接：

<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 我很抱歉之前没有解释清楚，我实际上想在描述 div 中添加更多链接或图像而不是纯文本，所以常规的工具提示可能不会这样做。

谢谢。

4

2 回答 2

15

这是最简单的解决方案。

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/

于 2012-05-14T16:16:41.043 回答
7

您是否考虑过在这种情况下使用“标题”属性？

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

看看这是否符合您的需要。

它的作用是，当您将鼠标移到链接“foo”上时，鼠标指针旁边会出现一个包含“foo mean foo”的小框。

于 2012-05-14T16:08:44.167 回答