當滑鼠懸停在使用 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中文網其他相關文章！