如何让 Twitter Bootstrap 下拉菜单出现在悬停而不是点击时？

悬停触发 Twitter Bootstrap 菜单下拉菜单

使用 Twitter Bootstrap 时，可以在悬停时自动下拉菜单，而不需要单击。这是通过 CSS 修改实现的。

要在悬停时激活下拉菜单，请将选择器定位为隐藏菜单选项。例如，如果使用 Twitter Bootstrap 页面中的示例：

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

但是，如果使用响应式功能，则当导航栏在较小屏幕上折叠时，您需要排除此功能。将以上代码包含在媒体查询中：

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

删除下拉箭头

要隐藏箭头（插入符号），请将其从下拉切换锚点中删除元素，具体取决于您的 Twitter 版本Bootstrap：

• Bootstrap 3： 从元素中删除 HTML 。
• Bootstrap 2 及更低版本： 使用 CSS定位并设置 :after 伪样式的样式元素：

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

请记住了解这些概念如何工作并尝试代码以根据需要自定义行为。

以上是如何让 Twitter Bootstrap 下拉菜单出现在悬停而不是点击时？的详细内容。更多信息请关注PHP中文网其他相关文章！