如何使 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中文网其他相关文章！