如何在鼠标链接上的链接页面的小弹出窗口中显示实时预览？ [英] How to show live preview in a small popup of linked page on mouse over on link?

问题描述

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

像这样

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

但实时预览

解决方案

您可以使用iframe显示预览

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

HTML：

  < a href =http://en.wikipedia.org/>维基百科< / a>< div class =box>< iframe src =http：//en.wikipedia .org /width =500pxheight =500px>< / iframe>< / div>在鼠标悬停时保持打开。 
  

CSS：

 code> .box {
 display：none; 
 width：100％; 
} 
 
 a：hover + .box，.box：hover {
 display：block; 
 position：relative; 
 z-index：100; 
} 
  

以下是多个链接预览的示例。

How to show live preview in a small popup of linked page on mouse over on link ?

like this

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

but live preview

解决方案

You can use an iframe to display a preview of the page on mouseover.

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

HTML:

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

CSS:

.box{
    display: none;
    width: 100%;
}

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

Here's an example with multiple link previews.

这篇关于如何在鼠标链接上的链接页面的小弹出窗口中显示实时预览？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！