6

特定のメニュー項目がホバーされたときにポップオーバーメニューを作成したいのですが、私のメニューは次のようなものです:

アイテム1 | アイテム2 | アイテム3

item2 をホバーすると、item2 の下に矢印が上向きのポップオーバーを表示したいと考えています。まだ行ったことはありませんが、これは JavaScript を使用して非常に簡単に実行できると確信しています。ただし、ここでの要件は CSS のみを使用することです。

私はこの例を見つけました：

http://demo.webinterfacelab.com/13-profile-popover/

唯一の違いは、ポップオーバーをメニューの上ではなく下に表示し、下向きではなく上向きの矢印を表示する必要があることです。下の画像のように：

ここに画像の説明を入力

誰にもこれを行う方法の例がありますか? または、これを行うのを手伝ってもらえますか?

4

3 に答える 3

13

男、あなたはインスペクターの使い方を学ばなければなりません:)トリックは疑似クラスに:afterあります。:before

それで、これがそのチュートリアルの動作デモです。いくつかのCSSを変更しました。チェックしてください。

注: これは CSS3 有効なデモです。これらの疑似クラスは古いブラウザーでは機能せず、矢印も表示されません。トランジションやその他の CSS3 ファンシーなものについても同様です。JS が不要な場合は、そのことに注意してください。

于 2012-10-13T22:44:47.453 に答える
8

http://jsfiddle.net/9yeAJ/

上記のフィドルは、これを行う1つの方法を示しています。それがあなたを正しい軌道に乗せることを願っています。

于 2012-10-13T22:54:54.850 に答える
1

css3 トランジション (アニメーション) を調べます。ホバー トランジションとドロップ ダウン メニューで満たされた素晴らしいチュートリアルを見つけることができます。

于 2012-10-13T22:39:11.860 に答える