在文本鼠標上彈出的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網頁上的文字「文本物品1」，我想所謂的「圖像1」的圖像上的文字彈出。我也希望彈出窗口在圖片上方包含一些文字。當我將鼠標指針從item1文本移開時，彈出窗口應該消失。同樣，當我將鼠標放在「item2文本」上時，image2應該彈出。

如何使用JavaScript做到這一點，那麼我將如何使用jQuery來做得更好？

我是一個完整的JavaScript和jQuery新手，提前對不起我的知識欠缺。

Answer 1

看看優秀的jQuery plugin Powertip，這將爲您節省大量的謎語。通常，這樣的mouseover/mouseout - 對於跨瀏覽器的兼容性和定位而言是非常棘手的。然後

代碼會看起來像

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

Answer 2

嗨，我發現這個優秀的教程：jQuery for Absolute Beginners，他使用的HTML代碼的<a>標籤，這裏是他是如何做到： http://jsfiddle.net/k2E7W/2/