ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップのドロップダウンをホバー有効にする方法は?

ブートストラップのドロップダウンをホバー有効にする方法は?

DDD
DDDオリジナル
2024-11-12 06:18:02569ブラウズ

How to Make Bootstrap Dropdowns Hover-Enabled?

ブートストラップ ホバー ドロップダウン

ブートストラップの「onClick」機能を使用して、ドロップダウン メニューを備えたナビゲーション バーを構成しました。ただし、代わりにマウス ホバーでドロップダウンをアクティブにしたいと考えています。

解決策:

Bootstrap には、ドロップダウン用の組み込みホバー機能がありません。これを実現するには、CSS を活用できます:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

この CSS ルールは次のようになります:

  • 親ドロップダウンがマウスの上に置かれたときにドロップダウン メニューを表示します
  • 削除デフォルトのマージントップ値によって作成されたギャップ

以上がブートストラップのドロップダウンをホバー有効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。