CSS でホバー ドロップダウン メニューを実装する方法

CSS でホバー ドロップダウン メニューを実装する方法

いつものように、今日は非常に実用的な CSS 効果についてお話します。マウスがボタンに移動すると、ドロップダウン メニューが自動的に表示されます。効果は以下のとおりです。

画像の説明を追加してください

画像の説明を追加してください

非常にシンプルなデモです。実装手順は次のとおりです。

まず、ボタンとリンク グループを囲む大きな div を定義し、その div の下の 2 つの要素のスタイルをそれぞれ設定します。各パーツのホバー効果を設定するために接続グループが非表示になっています。

/* .dropdown のホバー効果、.dropdown-content に作用します*/
      .dropdown:hover .dropdown-content {
          表示: ブロック;
      }

最後に、ソースコードを添付します。

<!DOCTYPE html>
<html>

<ヘッド>
    <title>ドロップダウン メニューの例</title>
    <メタ文字セット="utf-8">
    <スタイル>
        体 {
            マージン: 自動;
        }
        
        .dropbtn{
            背景色: #4CAF50;
            色: #fff;
            パディング: 16px;
            フォントサイズ: 16px;
            境界線: なし;
            カーソル: ポインタ;
        }
        
        。落ちる {
            左: 47%;
            /* 相対位置として宣言すると、次のサブ要素がこの要素を参照できるようになります*/
            位置: 相対的;
            表示: インラインブロック;
        }
        
        .ドロップダウンコンテンツ{
            /* 要素を非表示にする */
            表示: なし;
            位置: 絶対;
            背景色: #f9f9f9;
            最小幅: 160px;
            ボックスの影: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        
        .ドロップダウンコンテンツ a {
            色: 黒;
            パディング: 12px 16px;
            テキスト装飾: なし;
            表示: ブロック;
        }
        
        .ドロップダウンコンテンツ a:hover {
            背景色: #f1f1f1
        }
        
        /* .dropdown のホバー効果、.dropdown-content に作用します*/
        .dropdown:hover .dropdown-content {
            表示: ブロック;
        }
        
        .dropdown:hover .dropbtn {
            背景色: #3dc741;
        }
    </スタイル>
</head>

<本文>

    <h2 style="text-align: center;">ドロップダウン メニュー</h2>
    <p style="text-align: center;">ボタンの上にマウスを移動すると、ドロップダウン メニューが開きます</p>

    <div class="dropdown">
        <button class="dropbtn">ドロップダウン メニュー</button>
        <div class="ドロップダウンコンテンツ">
            <a href="#" target="_block">こんにちは世界 1</a>
            <a href="#" target="_block">Hello World 2</a>
            <a href="#" target="_block">Hello World 3</a>
        </div>
    </div>

</本文>

</html>

CSS でホバー ドロップダウン メニューを実装する方法についての記事はこれで終わりです。CSS ホバー ドロップダウン メニューに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ウェブサイトの画像にグレー効果を加える3つの方法

>>:  MySQL における varchar 型と char 型の違い

推薦する

Reactドラッグフックを実装するための100行以上のコード

序文ソースコードは合計で 100 行強しかありません。これを読めば、react-dnd などの成熟し...

TomcatはLog4jを使用してcatalina.outログを出力します。

Tomcat のデフォルトのログは java.util.logging を使用しますが、これにはい...

mysqldumpデータエクスポートの問題に関する詳細な議論

1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...

MySQLサービスの自動停止の解決策

この記事では主に、MySQL サービスの自動停止の解決策を紹介し、参考と学習のために共有します。一緒...

mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明

MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

Mysql5.7 で JSON 操作関数を使用する手順

序文JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ています...

Linux カーネル デバイス ドライバー カーネル リンク リストの使用上の注意

/******************** * カーネルにおけるリンクリストの応用********...

ネイティブ JS で音楽プレーヤーを実装するためのサンプル コード

この記事では主に、次のように共有されるネイティブ JS 音楽プレーヤーのサンプル コードを紹介します...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

Alibaba Cloud ECS centos6.8 に MySql5.7 をインストールして設定するチュートリアル

Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...

VMware 仮想マシンのインストール Apple Mac OS の超詳細なチュートリアル

目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...