iframe を使用してリンク上にマウスを移動したときに、ポップアップでライブ ページ プレビューを表示するにはどうすればよいですか?

iframe を使用したマウスオーバー時のライブ ページ プレビューの表示

リンク上にマウスを置いたときに小さなポップアップに表示されるライブ ページ プレビューを作成するには、iframe の利用を検討してください。以下に段階的なアプローチを示します:

1. iframe コンテナーを作成します: iframe コンテナーの CSS クラス (「.box」など) を定義し、スタイルを設定します。最初は「display: none;」で非表示になりました。
2. iframe の配置: CSS ルールを使用して、リンクを基準にして iframe コンテナを配置します。たとえば、「位置:相対;」を使用できます。 iframe コンテナと「position:Absolute;」 iframe 自体で。
3. 可視性の制御: CSS セレクターを使用して、iframe コンテナーの可視性を制御します。たとえば、「a:hover .box, .box:hover { display: block; }」と指定すると、マウスオーバー時にコンテナが表示されます。
4. iframe: を埋め込みます。 iframe コンテナーに、プレビューするページの目的の URL を含む iframe 要素を挿入します。それに応じて 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>

このコードは、ライブ プレビューを含む小さなポップアップを作成します。リンクの上にマウスを置くと、Wikipedia ページが表示されます。ポップアップは、カーソルが境界内にある限り表示されたままになります。

以上がiframe を使用してリンク上にマウスを移動したときに、ポップアップでライブ ページ プレビューを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。