8

ここに私が実装したいものがあります：

Web ページに表示される 2 つのハイパーリンクがあります。

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

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

また、div としてのリンクへの 2 つの説明もあります。

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

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

ここで、foo のリンクにマウスを合わせると、対応する説明 div がポップアップし、カーソルがある場所のすぐ隣にポップアップするはずです。

したがって、「foo」にマウスを合わせると、「foo means 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 means foo」を含む小さなボックスがマウスポインタの横に表示されます。

于 2012-05-14T16:08:44.167 に答える