カーソルを合わせたときにブートストラップドロップダウンをアクティブにする方法-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-05 20:19:14

オリジナル

871 人が閲覧しました

How to Make Bootstrap Dropdowns Activate on Hover?

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

ドロップダウンメニューのあるブートストラップナビゲーションバーで、デフォルトの 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 サイトの他の関連記事を参照してください。