Javascript 将鼠标悬停在文本上时显示缩略图_Javascript_Html_Text_Hover_Thumbnails

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

javascript html text

Javascript 将鼠标悬停在文本上时显示缩略图,javascript,html,text,hover,thumbnails,Javascript,Html,Text,Hover,Thumbnails,当我将文本（不是超链接）悬停时，如何显示缩略图（图像）谢谢。您可以使用jQuery： Html标记： <html> <body> <p>Sample text</p> <img class="thumbImage" style="display:none" src="sample.png" /> </body> </html> 在代码片段中，我使用了fadeIn，fadeOut，这

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

谢谢。

您可以使用jQuery：

Html标记：

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

在代码片段中，我使用了

fadeIn

，

fadeOut

，这增加了很好的淡入淡出效果

JQuery文档：

或者你也可以使用Jquery插件来实现，网络上有很多例子。

一些文本

谢谢，正是我想要的！但是有一个问题，你知道如何对齐缩略图吗？用什么对齐拇指？垂直还是水平？你发布了一个链接或任何代码，所以我们不知道页面是什么样子。对不起，我的意思是根据你的鼠标位置来定位拇指。就像一个普通的工具提示，而不是它总是在文本下面。有jquery工具可以灵活地完成您需要的任务。

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