CSS のみを使用して、div にマウスオーバーしたときに別の div に画像をポップアップするにはどうすればよいですか?

Question

サムネイルの小さなギャラリーがあります。サムネイル画像の上にマウス ポインタを置くと、画面右上の div にフルサイズの画像がポップアップ表示されるようにしたいと考えています。これが CSS だけを使用して行われているのを見てきましたが、可能であれば JavaScript を使用するのではなく、そのルートをたどりたいと考えています。

Answer 1

純粋な CSS ポップアップ 2, 、Complexspiralをもたらしたのと同じサイトから。この例では、実際のナビゲーション リンクをロールオーバー要素として使用していることに注意してください。それを望まない場合は、IE のバージョンに関する問題が発生する可能性があります。

基本的な手法は、実際の href を含むリンク タグ内に各画像を貼り付けることです (そうしないと、一部の IE バージョンでは :hover が無視されます)。

<a href="#">Text <img class="popup" src="pic.gif" /></a>

絶対位置を使用して賢く配置します。最初は画像を非表示にする

a img.popup { display: none }

次に、リンク ロールオーバーで、それが表示されるように設定します。

a:hover img.popup { display: block }

これは基本的なテクニックですが、イメージ タグはリンク タグ内に存在するため、配置には常に大きな制限があります。詳細についてはリンクを参照してください。彼は表示よりも少しトリッキーなものを使用しています。画像を非表示にするためのなし。

Answer 2

CSS プレイグラウンド この種のことには純粋な CSS を使用します。デモの 1 つは確実に役立ちます。すべて CSS なので、ソースを表示して学習するだけです。おそらく :hover 疑似クラスを使用したいと思いますが、ブラウザーのターゲットに応じて制限があります。 。

Answer 3

エリック・マイヤーの 純粋な CSS ポップアップ 2 デモはあなたが望むものに十分似ているように聞こえます。

Answer 4

以下にいくつかの例を示します。

• CSS画像ギャラリー
• クロスブラウザの複数ページのフォト ギャラリー
• CSS のみのイメージ ギャラリー:説明済み
• CSS のみのイメージ ギャラリー:例

この最後のものはクリックに応じて動作します。ただ行動を完璧にするためです。