如何在滑鼠懸停時為連結頁面建立即時預覽彈出視窗？

在連結頁面上顯示滑鼠懸停時的即時預覽

在本文中，我們將探索如何建立顯示即時預覽的功能當使用者將滑鼠懸停在連結上時，連結頁面會在一個小彈出視窗中顯示。

與 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中文網其他相關文章！