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

【问题标题】：Hovering Over Text and popping up an image将鼠标悬停在文本上并弹出图像
【发布时间】：2019-01-16 02:08:14
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery css

【解决方案1】：

这可以用纯 HTML 来完成：

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

和 CSS：

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

See example!

【讨论】：

他的问题很笼统，所以我想给出最基本的解决方案。

【解决方案2】：

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

$('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.

【讨论】：

如果“image”这个词设置了某个图像或者文本是“anotherImage”然后显示图像2你可以用这个if条件修改代码吗？我对 jquery 还不太熟悉。

【解决方案3】：

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

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

【讨论】：

你能用我展示的简单 html 做到这一点吗？我不确定如何处理#yourImage？
$('.yourTextClass') 将选择所有具有 class="yourTextClass" 的 HTML 元素，而 $('#yourImg') 将选择任何具有 id="yourImg" 的 HTML 元素。我认为在进入这个之前你需要一些基本的 jQuery 知识。看看这里docs.jquery.com/Tutorials:Getting_Started_with_jQuery

【解决方案4】：

嘿，要做到这一点，您需要使用 jquery.hover() 方法。

你可以做的是设置一个链接标签

工作示例

http://jsfiddle.net/HDhws/

【讨论】：

【解决方案5】：

类似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();
});

【讨论】：