將鼠標懸停在文本上時顯示縮略圖

當我懸停文本（不是超鏈接）時，如何顯示縮略圖（圖像）。將鼠標懸停在文本上時顯示縮略圖

謝謝。

2011-11-27 Bob Let

<div onmouseover="document.getElementById('myimg').style.display='block';" 
     onmouseout="document.getElementById('myimg').style.display='none';">some text 
</div> 
<img id="myimg" style="display:none" src="beer.png" />

來源

2011-11-27 17:11:27 COBOLdinosaur

謝謝，就是我一直在尋找的！但是有一個問題，你對如何對齊縮略圖有任何想法嗎？ –

拇指與什麼對齊？垂直還是水平？您發佈了一個鏈接或任何代碼，因此我們不知道該頁面是什麼樣子。 – COBOLdinosaur

對不起，我的意思是根據你的鼠標位置放置拇指。像一個普通的工具提示，而不是總是在文本之下。 –

您可以使用jQuery：

HTML標記：

<html> 
    <body> 
    <p>Sample text</p> 
    <img class="thumbImage" style="display:none" src="sample.png" /> 
    </body> 
</html>

JavaScript代碼段：

$(document).ready(function(){ 
    $('p').mouseover(function(){ 
     // Put logic on show 
     $('.thumbImage').fadeIn('slow'); 
    }).mouseout(function(){ 
     // Put logic on hide 
     $('.thumbImage').fadeOut('slow'); 
    }); 
});

在片斷，我用fadeIn，fadeOut，這增加了漂亮的淡入淡出效果。

JQuery的文檔：here

或者你也可以使用jQuery插件，這樣做，有淨很多例子。

來源

2011-11-27 17:02:05

將鼠標懸停在文本上時顯示縮略圖

回答

相關問題