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

Question

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

謝謝。

Answer 1

 <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="https://upload.wikimedia.org/wikipedia/commons/8/81/Stackoverflow_icon.png" />

Answer 2

您可以使用 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 文檔：這里

或者你可以使用 Jquery 插件來完成它，網絡中有很多例子。

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

問題描述

2 個解決方案

解決方案1
3 已采納 2011-11-27 17:11:27

解決方案2
1 2011-11-27 17:02:05

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

問題描述

2 個解決方案

解決方案1 3 已采納 2011-11-27 17:11:27

解決方案2 1 2011-11-27 17:02:05

解決方案1
3 已采納 2011-11-27 17:11:27

解決方案2
1 2011-11-27 17:02:05