サムネイルの小さなギャラリーがあります。サムネイル画像の上にマウス ポインターを置くと、画面の右上にある div にフル サイズの画像がポップアップ表示されます。私はこれが CSS だけを使用して行われているのを見てきました。可能であれば、javascript を使用するのではなく、そのルートをたどりたいと思います。
4 に答える
純粋な CSS Popups2は、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 }
これは基本的な手法ですが、画像タグはリンク タグ内にあるため、常に大きな配置制限があります。詳細はリンクを参照してください。彼は display: none よりも少しトリッキーなものを使用して、画像を非表示にしています。
CSS Playgroundは、この種のことのために純粋な CSS を使用します。デモの 1 つがきっと役に立ちます。すべての CSS はソースを表示して学習するだけなので、おそらく :hover 疑似クラスを使用したいと思うでしょうが、それには制限があります。ブラウザターゲティング。
Eric Meyer のPure CSS Popups 2デモは、あなたが望むものに十分似ています。
以下にいくつかの例を示します。
この最後のものはクリック時に動作します。行動を完全にするだけです。