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 text”文本上时，我希望在文本上弹出一个名为“image1”的图像。我还希望弹出窗口中包含一些文本。当我将鼠标指针移离该item1文本时，弹出窗口应该消失。同样，当我将鼠标悬停在“item2 text”上时，会弹出image2。

如何使用JavaScript执行此操作，那么如何使用jQuery更好地完成此操作？

我是一个完整的JavaScript和jQuery新手，对于我缺乏知识而提前抱歉。

Answer 1

您好我发现了这个优秀的教程：jQuery for Absolute Beginners，他使用了<a>标签来获取HTML代码，以下是他的表现： http://jsfiddle.net/k2E7W/2/

Answer 2

看一下优秀的jQuery plugin Powertip，它可以为你节省大量的时间。通常情况下，这样的鼠标悬停/鼠标移动 - 对于跨浏览器的兼容性和定位而言，事情有点棘手。

代码看起来像

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

文本鼠标上的javascript图像弹出窗口

2 个答案: