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

Question

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

像这样

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

但实时预览

原文由 Jitendra Vyas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 iframe 在鼠标悬停时显示页面预览：

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

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

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

这是一个包含多个实时预览的示例：

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

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

 Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
     <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
     </iframe>
  </div>
and <a href="https://www.jquery.com/">JQuery</a>
  <div class="box">
     <iframe src="https://www.jquery.com/" width = "500px" height = "500px">
     </iframe>
  </div>
will appear when these links are moused over.

原文由 Anderson Green 发布，翻译遵循 CC BY-SA 4.0 许可协议