-3

いくつかのテキストがあり、特定の単語が強調表示されています。それぞれのテキストにカーソルを合わせると、画像 (主に gif) が一種の「ツールチップ」として表示されるようにしたいと思います。ハイライトする単語ごとに、別の gif を使用したいと思います。

と でCSS を使用するa:hoverとbackground-image、レイアウト全体がめちゃくちゃになります。jQuery & qTip も試しましたが、画像の解決策が見つかりませんでした。

最も完璧な解決策は、次のことができる場合です。

<a href="#" title="" src="1y2m_small.png">1st year, 2nd month</a>

srcツールチップに表示したい画像はどこにありますか。

4

2 に答える 2

1

少しjQueryを試してください：

$('a').hover(
    function(){
        $(this).append('<img src="' + $(this).attr('src') + '" />');
    },
    function(){
        $(this).children('img').remove();
    }
);

必要な CSS:

a{
    position: relative;
}
img{
    position: absolute;
    top: 20px;
    left: 0; //position how you want
}

ここに動作するjsFiddleがあります

ソース

.hover() - jQuery API

于 2013-04-15T09:24:18.237 に答える
0

ここであなたの答えを得ました息子。私をチェックして+1してください

http://jsfiddle.net/alaingoldman/ybQCd/4/

単純

CSS

#hide{ 表示: なし; 位置:絶対; }

HTML

<span id="target" > Hover over me </span>
<img id="hide"  src="http://oi45.tinypic.com/33tjd3d.jpg">

jQuery

$(document).bind('mousemove', function(e){ $('#hide').css({ left: e.pageX + 20, top: e.pageY }); $("#target") .hover( function () { $("#hide").show(); }, function () { $("#hide").hide(); });});

于 2013-04-15T09:52:13.447 に答える