文本鼠标悬停时弹出的JavaScript图像

Question

我希望当我使用JavaScript和jQuery将鼠标悬停在某些HTML文本上时弹出图像。有多行，每行应弹出不同的图像。我的意思不是实际的弹出窗口，只是图像在屏幕上弹出或爆炸。

因此，如果我的 html 代码看起来像这样：

<p id="item1">item1 text</p>
<p id="item2">item2 text</p>
<p id="item3">item3 text</p>

当我将鼠标悬停在HTML页面上的文本"item1文本"上时，我希望文本上弹出一个名为"image1"的图像。我还想在弹出窗口中包含图片上方的一些文本。当我将鼠标指针移离该项目1文本时，弹出窗口应该消失。 同样，当我将鼠标悬停在"item2 文本"上时，应该会弹出 image2。

我如何使用JavaScript来做到这一点，那么我将如何使用jQuery做得更好？

我是一个完整的JavaScript和jQuery新手，提前对不起我缺乏知识。

Answer 1

嗨，

我找到了这个优秀的教程：绝对初学者的jQuery，他使用<a>标签作为html代码，这是他是如何做到的：http://jsfiddle.net/k2E7W/2/

Answer 2

看看优秀的jQuery插件Powertip，它将为您节省很多麻烦。通常，这种鼠标悬停/鼠标退出 - 关于跨浏览器兼容性和定位的事情有点棘手。

然后代码将如下所示

$('#element')
    .data('powertipjq', $('<p>Some text</p><img src="yourImage.png" />'));
    .powerTip({
        placement: 'e',
        mouseOnToPopup: true
    });