Bagaimana untuk Menjadikan Bootstrap Dropdown Aktifkan pada Hover?

Pengaktifan Jatuh Turun Bootstrap pada Tuding

Dalam bar navigasi Bootstrap anda dengan menu lungsur turun, anda cuba mengaktifkan lungsur turun pada tuding dan bukannya onClick lalai tingkah laku.

Menggunakan Penyelesaian CSS:

Penyelesaian paling mudah untuk mencapai ini adalah melalui CSS. Tambahkan coretan berikut pada fail CSS anda:

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

Peraturan CSS ini menetapkan menu lungsur turun untuk dipaparkan sebagai elemen blok apabila lungsur turun induknya dituding ke atas. Selain itu, ia membatalkan margin atas awal untuk memastikan menu kelihatan lancar di bawah butang lungsur.

Contoh Pelaksanaan:

<!-- 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>

Dengan menggunakan peraturan CSS ke lungsur turun yang terakhir, ia akan diaktifkan pada tuding, manakala lungsur pertama mengekalkan onClicknya tingkah laku.

Perhatikan bahawa penyelesaian CSS ini memerlukan menu lungsur turun anda disarang secara konsisten dalam elemen induk lungsur turun.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Bootstrap Dropdown Aktifkan pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!