如何在鼠标悬停时为链接页面创建实时预览弹出窗口？

在链接页面上显示鼠标悬停时的实时预览

在本文中，我们将探索如何创建显示实时预览的功能当用户将鼠标悬停在链接上时，链接页面会在一个小弹出窗口中显示。

与 cssglobe.com 上演示的功能类似，我们的目标是实现一个弹出窗口，在鼠标悬停时显示链接页面的实时预览。然而，在我们的例子中，我们将增强它以显示实时内容。

解决方案

利用 iframe，我们可以在鼠标悬停时合并页面的实时预览:

<code class="javascript">.box{
    display: none;
    width: 100%;
}

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

<code class="html">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.</code>

在此解决方案中，每个链接都关联一个隐藏的 div，其中包含一个用于显示实时预览的 iframe。当用户将鼠标悬停在链接或 div 上时，div 变得可见，相对于链接定位，并且由于 z 索引而显示在其他元素的顶部。

以上是如何在鼠标悬停时为链接页面创建实时预览弹出窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！