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

ホバーリングにより Twitter Bootstrap メニュー ドロップダウンがトリガーされます

Twitter Bootstrap を使用する場合、クリックを必要とせずにホバー時にメニュー ドロップダウンを自動的に作成することができます。これは CSS の変更によって実現されます。

ホバー時にドロップダウンをアクティブにするには、非表示のメニュー オプションのセレクターをターゲットにします。たとえば、Twitter Bootstrap ページのサンプルを使用する場合:

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

ただし、レスポンシブ機能を使用している場合は、小さな画面でナビゲーションバーが折りたたまれたときにこの機能を除外する必要があります。上記のコードをメディア クエリでラップします。

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

ドロップダウン矢印の削除

矢印 (キャレット) を非表示にするには、ドロップダウン トグル アンカーから矢印を削除します。要素 (Twitter のバージョンに応じて)ブートストラップ:

• ブートストラップ 3: 要素から HTML を削除します。
• ブートストラップ 2 以下: CSS を使用:after 擬似をターゲットにしてスタイルする要素:

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

これらの概念がどのように機能するかを理解し、必要に応じてコードを試して動作をカスタマイズしてください。

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