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="beer.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 doc：here

或者您可以使用Jquery插件来实现它，网络中有很多例子。

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

2 个答案: