5

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

4

4 に答える 4

5

純粋な 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 よりも少しトリッキーなものを使用して、画像を非表示にしています。

于 2008-09-20T15:32:39.613 に答える
1

CSS Playgroundは、この種のことのために純粋な CSS を使用します。デモの 1 つがきっと役に立ちます。すべての CSS はソースを表示して学習するだけなので、おそらく :hover 疑似クラスを使用したいと思うでしょうが、それには制限があります。ブラウザターゲティング。

于 2008-09-20T15:33:31.560 に答える
0

Eric Meyer のPure CSS Popups 2デモは、あなたが望むものに十分似ています。

于 2008-09-20T15:27:14.850 に答える
0

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

この最後のものはクリック時に動作します。行動を完全にするだけです。

于 2008-09-20T15:31:03.890 に答える