-3

我有一些文字，并突出显示了某些单词。当我将鼠标悬停在相应的文本上时，我希望图像（主要是 gif）显示为一种“工具提示”。对于我突出显示的每个单词，我想使用不同的 gif。

如果我将 CSS 与a:hoverand一起使用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

#隐藏{显示：无；位置：绝对；}

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( 函数 () { $("#hide").show(); }, 函数 () { $("#hide").hide(); });});

于 2013-04-15T09:52:13.447 回答