起因#在日常的前端开发中，悬浮展示是一个非常常见的场景，比如下拉菜单、提示框和弹出菜单等。如果你是第一次实现这些功能，可能会写出如下代码：
1// DO NOT USE THIS CODE2
3referenceElement.addEventListener("mouseenter", () => {4 // show content5});6referenceElement.addEventListener("mouseleave", () => {7 // hide content8});这段代码看起来很简单，用于显示 tooltip 是没有问题的。然而，在下拉菜单这种需要交互的场景中，当用户从主菜单移动鼠标到子菜单时，子菜单会迅速消失。
为了避免这个问题，我们可以将子菜单的 DOM 放在主菜单内部，这样鼠标移出到子菜单上时，就不再会触发 mouseleave 事件了。
然后就出现了上述情况，为什么还是不行？原来设计师为了美观，在主菜单和子菜单之间留了一点空白，导致鼠标还未到达子菜单上时就触发了 mouseleave 事件。