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

使用 iframe 在鼠标悬停时显示实时页面预览

创建当鼠标悬停在链接上时出现在小弹出窗口中的实时页面预览，考虑使用 iframe。以下是分步方法：

1. 创建 iframe 容器： 为 iframe 容器定义 CSS 类，例如“.box”，并将其样式设置为最初隐藏为“display: none;”。
2. 定位 iframe： 使用 CSS 规则相对于链接定位 iframe 容器。例如，您可以使用“位置：相对；”在 iframe 容器上和“位置：绝对；”在 iframe 本身上。
3. 控制可见性： 使用 CSS 选择器来控制 iframe 容器的可见性。例如，您可以指定“a:hover .box, .box:hover { display: block; }”以使容器出现在鼠标悬停时。
4. 嵌入 iframe: 内部iframe 容器中，插入一个 iframe 元素，其中包含要预览的页面的所需 URL。相应地指定 iframe 的尺寸。

示例代码：

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

此代码将创建一个包含实时预览的小弹出窗口当鼠标悬停在链接上时的维基百科页面。只要光标保持在其边界内，弹出窗口就会保持可见。

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