リンクされたページのマウスオーバー時にライブ プレビュー ポップアップを作成するにはどうすればよいですか?

リンクされたページでマウスオーバーしたときにライブ プレビューを表示する

この記事では、ライブ プレビューを表示する機能の作成方法について説明します。ユーザーがリンク上にマウスを移動すると、小さなポップアップでリンクされたページの内容が表示されます。

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>

このソリューションでは、ライブ プレビューを表示するための iframe を含む非表示の div が各リンクに関連付けられています。ユーザーがリンクまたは div の上にマウスを移動すると、div が表示され、リンクに対して相対的に配置され、z-index のおかげで他の要素の上に表示されます。

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