javascript - 为什么我的 css/js 下拉菜单在到达末尾之前就隐藏了？

Question

我有一个简单的下拉子菜单，当您将鼠标悬停在水平菜单的列表元素上时会显示该子菜单。

我通过将相对位置设置为 LI 父级并将绝对位置设置为子菜单的容器来定位下拉子菜单。

然后我通过使用 jquery 监听 mouseenter 显示子菜单，并通过监听 mouseleave 隐藏它。

起初看起来一切正常，但在向子菜单添加一些内容后，它现在有 100 像素的高度，我开始遇到问题:

mouseenter 运行正常，但 mouseleave 在到达子菜单末尾之前被多次触发，当我到达末尾的一半时它被触发。

为什么会这样？

Answer 1

即使我没有提供代码示例，我也是在回答我自己的问题，我只是想解释一下情况以及发生了什么。

看起来我在主水平菜单之后的内容有一个默认的 z-index，导致它被放置在我的下拉菜单的顶部。

所以发生的事情是，当我到达水平菜单后的内容时，当我用光标向下移动时，即使我还没有到达下拉菜单的末尾，我的光标不知何故离开了下拉菜单，因为的 z-index。

所以我的解决方案是在下拉列表中添加一些 z-index 进行测试，例如 z-index: 11，它奏效了!您应该在您的案例中设置的 z-index 可能会有所不同，具体取决于页面上的定位和 z-index 包含的其他内容。

希望对大家有帮助!