Question

是否可以将鼠标悬停在某些文字上并显示图片？一旦鼠标离开文本，图像就会消失？

<p>I have a word, when I hover over it, I see an image </p>

当您将鼠标放在单词“image”上时，它会显示“image1.jpg”

Answer 1

这可以使用纯HTML来完成：

<a href="#">Hover over me<img src="whatever.gif" /></a>

和CSS：

a img { display:none; }
a:hover img { display:block; }

See example!

Answer 2

$('.yourTextClass').hover(function() {
  // mouseOver function
  $('#yourImg').show();
}, function() {
  // mouseOut function
  $('#yourImg').hide();
});

如果您想要一些基本动画，也可以使用fadeIn()和fadeOut代替show和hide。

Answer 3

嘿，要做到这一点你需要使用的是jquery.hover（）方法。

您可以做的是设置链接标记

工作示例

http://jsfiddle.net/HDhws/

Answer 4

像this：

HTML：

<p id="text">Foo</p>
<div id="image_to_show" style="display:none"><img src="image1.jpg"/></div>

JavaScript的：

$('#text').mouseenter(function(){
  $('#image_to_show').fadeIn();
}).mouseleave(function(){
  $('#image_to_show').fadeOut();
});

Answer 5

因为你希望通过将鼠标悬停在一段没有包含在元素中的文本来实现功能，所以这变得有点复杂，但绝不是不可能的。以下内容采用您的“简单”html，并在您希望拥有span功能的文本周围创建hover个标记：

$('p').each(
    function(){
        var text = $(this).text();
        var spanText = text.replace('image','<span class="imgText">image</span>');
        $(this).html(spanText);
    });

$('.imgText').live(
    'mouseenter',
    function(){
        $('<img src="path/to/img.png" />')
            .appendTo($(this));
    });

$('.imgText').live(
    'mouseleave',
    function(){
        $(this).find('img').remove();
    });

JS Fiddle demo

将鼠标悬停在文本上并弹出图像

5 个答案:

工作示例