Wie kann ich Live-Seitenvorschauen in einem Popup anzeigen, wenn ich mithilfe von Iframes mit der Maus über Links fahre?

Anzeigen von Live-Seitenvorschauen bei Mouseover mithilfe von Iframes

Zum Erstellen von Live-Seitenvorschauen, die in einem kleinen Popup angezeigt werden, wenn die Maus über einen Link fährt , erwägen Sie die Verwendung von Iframes. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Erstellen Sie einen Iframe-Container: Definieren Sie eine CSS-Klasse für den Iframe-Container, z. B. „.box“, und formatieren Sie ihn entsprechend zunächst ausgeblendet mit „display: none;“.
2. Positionieren Sie den Iframe:Positionieren Sie den Iframe-Container mithilfe von CSS-Regeln relativ zum Link. Sie können beispielsweise „position: relative;“ verwenden. auf dem Iframe-Container und „position: absolute;“ auf dem Iframe selbst.
3. Sichtbarkeit steuern: Verwenden Sie CSS-Selektoren, um die Sichtbarkeit des Iframe-Containers zu steuern. Sie könnten beispielsweise „a:hover .box, .box:hover { display: block; }“ angeben, damit der Container beim Mouseover angezeigt wird.
4. Betten Sie den Iframe ein: Innerhalb des Fügen Sie im Iframe-Container ein Iframe-Element mit der gewünschten URL der Seite ein, die Sie in der Vorschau anzeigen möchten. Geben Sie die Abmessungen des Iframes entsprechend an.

Beispielcode:

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

Dieser Code erstellt ein kleines Popup mit einer Live-Vorschau von die Wikipedia-Seite, wenn die Maus über den Link fährt. Das Popup bleibt sichtbar, solange sich der Cursor innerhalb seiner Grenzen befindet.

Das obige ist der detaillierte Inhalt vonWie kann ich Live-Seitenvorschauen in einem Popup anzeigen, wenn ich mithilfe von Iframes mit der Maus über Links fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!