Bootstrap4 鼠标移动慢时菜单消失
Menu in Bootstrap 4 disappears when the mouse movement is slow
我是 运行 this fiddle,当鼠标指针从“开始”快速移动到展开的菜单时,一切正常。但是,当移动速度较慢时,菜单会关闭,因为感觉鼠标在左边。
const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
menu.toggleClass("open");
});
最初,我试图让列表项控件更高,但很快意识到菜单将在 下方 打开(加上这个不幸的垂直距离)。
我该怎么办?
显然 Bootstrap 创作者出于某种原因发现这很好(或者没有考虑鼠标移动而是点击)。我是否以不恰当的方式设置了悬停事件?
是的,这是由菜单元素和菜单本身之间的 space 引起的。当你快速移动时,没关系,因为光标 "jumps" 直接指向菜单,但移动缓慢时,你将离开菜单项区域,菜单消失。我想到的一种解决方案是将其移动 1px:
.open>.dropdown-menu {
top: calc(100% - 1px);
}
工作JSFiddle。
对我来说这个解决方案更好
here 是 fiddle
.open>.dropdown-menu{
margin-top: initial;
}
这个 css 为我修复了它 (Bootstrap v4.3.1):
div.dropdown-menu {
margin-top: 0 !important;
}
我是 运行 this fiddle,当鼠标指针从“开始”快速移动到展开的菜单时,一切正常。但是,当移动速度较慢时,菜单会关闭,因为感觉鼠标在左边。
const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
menu.toggleClass("open");
});
最初,我试图让列表项控件更高,但很快意识到菜单将在 下方 打开(加上这个不幸的垂直距离)。
我该怎么办?
显然 Bootstrap 创作者出于某种原因发现这很好(或者没有考虑鼠标移动而是点击)。我是否以不恰当的方式设置了悬停事件?
是的,这是由菜单元素和菜单本身之间的 space 引起的。当你快速移动时,没关系,因为光标 "jumps" 直接指向菜单,但移动缓慢时,你将离开菜单项区域,菜单消失。我想到的一种解决方案是将其移动 1px:
.open>.dropdown-menu {
top: calc(100% - 1px);
}
工作JSFiddle。
对我来说这个解决方案更好
here 是 fiddle
.open>.dropdown-menu{
margin-top: initial;
}
这个 css 为我修复了它 (Bootstrap v4.3.1):
div.dropdown-menu {
margin-top: 0 !important;
}