悬停在子导航可见性上

Question

我在React项目中创建一个像下拉导航这样的大型菜单。由于它是功能组件，因此我使用useState来切换状态并以这种方式显示和隐藏子导航。

该下拉列表有效，但是唯一的问题是，当用户将鼠标悬停在“子菜单”上并试图平移到另一个“子菜单”时，它消失了。关于如何使“子菜单”在用户平移所有子导航时可见的任何想法？

这里是codepen for reference

Answer 1

不需要javascript，您可以为此使用css：hover规则

您可以这样做

删除隐藏subnav元素的{isMenuOpen && (规则

.subnav-block {
    display: none;
}

.nav:hover .subnav-block {
    display: block;
}

不是您所要的，而是完成了工作（我认为这是一种更干净的方式）

希望这会有所帮助。