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

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

谢谢。

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

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

回答

相关问题