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

將滑鼠懸停在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中文網其他相關文章！