1

当我使用 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 新手，对于我缺乏知识提前抱歉。

4

2 回答 2

4

嗨，我找到了这个优秀的教程：jQuery for Absolute Beginners，他使用<a>了 html 代码的标签，他是这样做的：http: //jsfiddle.net/k2E7W/2/

于 2012-11-19T01:47:08.517 回答
0

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

然后代码看起来像

$('#element')
    .data('powertipjq', $('<p>Some text</p><img src="yourImage.png" />'));
    .powerTip({
        placement: 'e',
        mouseOnToPopup: true
    });
于 2012-11-18T23:33:43.927 回答