カーソルを合わせたときにブートストラップ ドロップダウンをアクティブにする方法

ホバー時のブートストラップ ドロップダウンのアクティブ化

ドロップダウン メニューのあるブートストラップ ナビゲーション バーで、デフォルトの onClick ではなく、ホバー時にドロップダウンをアクティブ化しようとします。

を使用した解決策CSS:

これを実現する最も簡単な解決策は、CSS を使用することです。次のスニペットを CSS ファイルに追加します:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Remove the gap for seamless display */
}

この CSS ルールは、親ドロップダウンにカーソルを置いたときにドロップダウン メニューがブロック要素として表示されるように設定します。さらに、最初のマージントップをキャンセルして、メニューがドロップダウン ボタンの下にシームレスに表示されるようにします。

実装例:

<!-- Dropdown with onClick behavior -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

<!-- Dropdown with onHover behavior using CSS -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

CSS ルールを適用することにより後者のドロップダウンではホバー時にアクティブになりますが、最初のドロップダウンでは onClick 動作が維持されます。

注この CSS ソリューションでは、ドロップダウン メニューがドロップダウンの親要素内に一貫してネストされている必要があります。

以上がカーソルを合わせたときにブートストラップ ドロップダウンをアクティブにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。