ブートストラップのドロップダウンをクリックではなくホバー上に表示するにはどうすればよいですか?

クリックする代わりにドロップダウンのブートストラップ メニューにカーソルを合わせる

Twitter のブートストラップ フレームワークを使用している場合、デフォルトでは、ユーザーがメニュー オプションをドロップダウン メニューとして表示します。タイトルをクリックしてください。ただし、この動作を変更して、ユーザーがタイトルの上にマウスを移動したときにメニューが自動的にドロップダウンするようにすることもできます。

ホバー ドロップダウンの CSS カスタマイズ

ホバーを有効にするにはドロップダウン メニューでは、CSS を利用してデフォルト設定をオーバーライドできます。適切な CSS セレクターは次のとおりです。

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

このコードは、関連するリスト項目 (li.dropdown) が、非表示のドロップダウン メニュー (ul.dropdown-menu で表される) がブロック要素として表示されるようにします。

ドロップダウンを非表示にする矢印

ホバー機能を有効にすることに加えて、メニュー タイトルの横に表示される小さな矢印 (キャレット) を非表示にすることもできます。適切な手順は、使用しているブートストラップのバージョンによって異なります。

ブートストラップ 3

ドロップダウンのトグル アンカー要素から次の HTML コードを削除します。

<b>caret</b>

ブートストラップ 2 と下

以下の CSS セレクターとコードを使用して、矢印をターゲットにして削除します。

a.menu:after, .dropdown-toggle:after {
    content: none;
}

これらの CSS 変更を実装することで、ブートストラップ メニューの使いやすさを向上させることができます。ユーザーがより便利にドロップダウン オプションにアクセスできるようになります。

以上がブートストラップのドロップダウンをクリックではなくホバー上に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。