Bagaimana Saya Boleh Jadikan Twitter Bootstrap Dropdown Muncul pada Hover Daripada Klik?

Hovering Triggers Twitter Bootstrap Dropdown Menu

Apabila menggunakan Twitter Bootstrap, adalah mungkin untuk membuat menu dropdown secara automatik pada tuding dan bukannya memerlukan klik . Ini dicapai melalui pengubahsuaian CSS.

Untuk mengaktifkan menu lungsur pada tuding, sasarkan pemilih untuk pilihan menu tersembunyi. Sebagai contoh, jika menggunakan sampel daripada halaman Twitter Bootstrap:

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

Walau bagaimanapun, jika menggunakan ciri responsif, anda perlu mengecualikan fungsi ini apabila bar navigasi runtuh pada skrin yang lebih kecil. Balut kod di atas dalam pertanyaan media:

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

Mengalih keluar Anak Panah Turun

Untuk menyembunyikan anak panah (karet), alih keluarnya daripada sauh togol lungsur turun elemen, bergantung pada versi Twitter Bootstrap anda:

• Bootstrap 3: Alih keluar HTML daripada elemen.
• Bootstrap 2 dan lebih rendah: Gunakan CSS untuk menyasarkan dan menggayakan elemen pseudo :after:

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

Ingat untuk memahami cara konsep ini berfungsi dan bereksperimen dengan kod untuk menyesuaikan tingkah laku mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Jadikan Twitter Bootstrap Dropdown Muncul pada Hover Daripada Klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!