在Bootstrap中,dropdown组件默认是通过点击触发下拉菜单的显示和隐藏。如果想要将dropdown代码转换为hoverable,即通过鼠标悬停触发下拉菜单的显示和隐藏,可以按照以下步骤进行操作: 首先,确保你已经引入了Bootstrap的CSS和JavaScript文件。 在HTML中,找到你想要转换的dropdown组件的代码块
在上述代码中,.dropdown:hover选择器可以用来设置悬停状态下的样式,例如: 代码语言:css 复制 .dropdown:hover .dropdown-menu{display:block;} 这样当鼠标悬停在下拉菜单的父元素上时,.dropdown-menu元素的display属性将被设置为block,从而保持菜单的展开状态。
<ahref="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"></a> 当然,还有最简单的方法,那就是用css的hover控制 1 .nav> li:hover .dropdown-menu {display:block;} 这样一句代码也能实现想要的hover效果,只不过如果在hover的时...
.dropdown.hover .dropdown-menu { display: block; margin-top: 0; } $('[data-toggle="dropdown"]').hover(function(){ var$parents = $(this).parents('.dropdown'); window.dropDownTimer&&clearTimeout(window.dropDownTimer); $('.dropdown').removeClass('hover'); $parents.addClass('hover...
<style> .dropdown-menu { margin:0 !important; } .dropright:hover > .dropdown-menu { display:block; } </style> 为什么加上这几句就行了呢?因为 dropdown-menu 类的原来的样式是 display:none;,所以设置 display:block; 之后dropdown-menu 就会显示出来了。 问题一 当鼠标放上去时没有问题,但是如果...
Bootstrap 4 Dropdown 鼠标点击改为鼠标悬停触发 Bootstrap 4 导航栏 navbar，支持二级菜单，由 Dropdown 实现，但默认为单击事件展开二级菜单，但很多需求是鼠标悬浮就需要展开子菜单。下面是方案：CSS .dropdown:hover>.dropdown-menu { display: block;}.dropdown>.dropdown-toggle:active { pointer-even...
Bootstrap 4 中下拉菜单 dropdown 的默认触发方式是鼠标点击,但是一般情况下,用在导航栏 navbar 中时,我们需要实现下拉菜单 dropdown 的触发方式改为鼠标浮动触发,其实很简单,添加两行自定义的 css 代码即可,具体如下: .dropdown:hover>.dropdown-menu { ...
$.fn.bootstrapDropdownHover({// see next for specifications}); Initiate on all dropdowns/dropups method 1 $('[data-toggle="dropdown"]').bootstrapDropdownHover({// see next for specifications}); Initiate on navbar menu only $('.navbar [data-toggle="dropdown"]').bootstrapDropdownHov...
接着,可以通过 npm 或者直接从 GitHub 下载最新版本的 Dropdown Hover 源码包。对于使用包管理器的项目,执行 `npm install bootstrap-dropdown-hover` 命令即可自动完成依赖安装。之后,在 HTML 文件头部加入 `<link>` 标签引用插件的 CSS 文件,在底部 `<body>` 标签结束前添加 `<script>` 标签加载 JS 脚本...
Showing the Bootstrap dropdown menu on hover with CSS is the simplest way to show the dropdown menu. Just add below CSS code and it will work perfectly. .navbar-nav .dropdown:hover .dropdown-menu { display: block; } We made it but still it’s not fancy as it should be. Now the...