将鼠标悬停在文本上时显示缩略图答案

【问题标题】：Show thumbnail when hover over text将鼠标悬停在文本上时显示缩略图
【发布时间】：2012-01-07 09:42:53
【问题描述】：

当我悬停文本（不是超链接）时如何显示缩略图（图像）。

谢谢。

【问题讨论】：

标签： javascript html text hover thumbnails

【解决方案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" />

【讨论】：

谢谢，正是我想要的！但是有一个问题，您对如何对齐缩略图有任何想法吗？
拇指对齐什么？垂直还是水平？您发布了链接或任何代码，因此我们不知道该页面的外观。
对不起，我的意思是根据您的鼠标位置定位拇指。就像一个普通的工具提示，而不是总是在文本下方。
flowplayer.org/tools/demos/tooltip/dynamic.html 拥有 jquery 工具，可以灵活地满足您的需求。

【解决方案2】：

你可以使用 jQuery：

HTML 标记：

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

Javascript sn-p:

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

在 sn-p 中我使用了fadeIn、fadeOut，这增加了很好的淡入淡出效果。

jQuery 文档：here

或者你可以使用 Jquery 插件来做到这一点，网上有很多例子。

【讨论】：