首頁 > web前端 > css教學 > 如何使 Bootstrap 下拉選單出現在懸停而不是點擊時?

如何使 Bootstrap 下拉選單出現在懸停而不是點擊時?

Mary-Kate Olsen
發布: 2024-12-27 09:44:10
原創
458 人瀏覽過

How Can I Make Bootstrap Dropdowns Appear on Hover Instead of Click?

將滑鼠懸停在Bootstrap 選單上以取得下拉式選單,而不是按一下

使用Twitter 的Bootstrap 框架時,預設情況下,當使用者使用時,選單選項將顯示為下拉式選單點擊標題。但是,可以修改此行為,以便當使用者將滑鼠懸停在標題上時,選單會自動下拉。

懸停下拉選單的 CSS 自訂

啟用懸停下拉選單中,您可以使用 CSS 來覆寫預設設定。適當的CSS 選擇器為:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}
登入後複製

此程式碼確保隱藏的下拉式選單(由ul.dropdown-menu 表示)在其關聯的清單項目(li.dropdown) 為區塊元素時顯示為區塊元素懸停在上方。

隱藏下拉箭頭

除了啟用懸停之外功能時,您可能想要隱藏選單標題旁邊出現的小箭頭(插入符號)。根據您使用的Bootstrap 版本,對應的步驟會有所不同:

Bootstrap 3

從下拉切換錨元素中刪除以下HTML 程式碼:

<b>caret</b>
登入後複製

引導程式 2和降低

利用下面的CSS 選擇器和程式碼來定位和刪除箭頭:

a.menu:after, .dropdown-toggle:after {
    content: none;
}
登入後複製

透過實施這些CSS 修改,您可以透過讓使用者更方便地存取下拉選項。

以上是如何使 Bootstrap 下拉選單出現在懸停而不是點擊時?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板