Wie erstelle ich ein Live-Vorschau-Popup bei Mouseover für verlinkte Seiten?

Live-Vorschau bei Mouseover mit verknüpften Seiten anzeigen

In diesem Artikel erfahren Sie, wie Sie eine Funktion erstellen, die eine Live-Vorschau anzeigt einer verlinkten Seite in einem kleinen Popup, wenn der Benutzer mit der Maus über den Link fährt.

Ähnlich der auf cssglobe.com demonstrierten Funktionalität möchten wir ein Popup implementieren, das beim Mouseover eine Live-Vorschau der verlinkten Seite anzeigt. In unserem Fall erweitern wir es jedoch, um Live-Inhalte anzuzeigen.

Lösung

Mithilfe eines Iframes können wir beim Mouseover eine Live-Vorschau der Seite einbinden :

<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>

In dieser Lösung ist jedem Link ein verstecktes Div zugeordnet, das einen Iframe zur Anzeige der Live-Vorschau enthält. Wenn der Benutzer mit der Maus über den Link oder das Div fährt, wird das Div sichtbar, relativ zum Link positioniert und dank des Z-Index über anderen Elementen angezeigt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Live-Vorschau-Popup bei Mouseover für verlinkte Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!