如何在链接上鼠标hover的链接页面的小弹出窗口中显示实时预览？

如何在链接上鼠标hover的链接页面的小弹出窗口中显示实时预览？

像这样

http://cssglobe.com/lab/tooltip/03/

但实时预览

Answer 1

您可以使用iframe在鼠标hover时显示页面预览。

http://jsbin.com/urarem/3/edit

HTML：

This live preview for Wikipedia
 remains open on mouseover. 

CSS：

 .box{ display: none; width: 100%; } a:hover + .box,.box:hover{ display: block; position: relative; z-index: 100; } 

这是一个包含多个链接预览的示例 。

Answer 2

您可以使用以下代码使用javascript显示链接的实时预览。

 
Cnet
 
Codegena
 
Apple
     

Answer 3

就个人而言，我会避免使用iframe并使用embed标签在鼠标hover框中创建视图。

Answer 4

我做了一个小插件来显示iframe窗口来预览链接。 仍在测试版。 也许它适合你的情况： https ： //github.com/Fischer-L/previewbox 。

Answer 5

另一种方法是使用网站缩略图/链接预览服务LinkPeek （甚至恰好显示StackOverflow的截图，现在作为演示）， URL2PNG ， Browshot ， Websnapr或替代方案 。

Answer 6

您可以执行以下操作：

1. 创建（或查找）将URL呈现为预览图像的服务
2. 将图像加载到鼠标上并显示它
3. 如果你对生活过于痴迷，那么使用一个Timer插件让jQuery在一段时间后重新加载图片

当然这实际上并不存在。

更明智的是，您可以为某些URL生成预览图像，例如每天或每周使用它们。 我想您不想手动执行此操作，并且您不希望向您的服务用户显示与网站当前外观完全不同的预览。