JS 叠加菜单未显示

Question

我想在我的网页左上角显示这个全屏覆盖菜单（效果很好）。 到目前为止，我的代码可以在这里看到。

当我单击覆盖菜单时，它似乎“隐藏”在主页内容的后面。

我更改了叠加菜单的一些z-index值，但是当我这样做时，主页导航（称为slick-dots元素）停止工作（可见但不可点击）。

当覆盖菜单打开时，导航（ slick-dots ）应该被隐藏。 但是，当全屏菜单关闭时，导航应该是可见的并且可以工作。

我不确定我应该如何配置z-index或position值才能实现我想要的？

对此的任何帮助将不胜感激。

Answer 1

使用您提到的 z-index 解决方案，您无法单击您的圆点导航，因为当您使用visibility: hidden而不是display: none ，元素仍然存在，占用其他所有内容的空间，拦截鼠标事件. 您可以使用pointer-events: none和visibility来让悬停和点击穿过它。

.nav {
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
}

body.nav-active .nav {
  visibility: visible;
  pointer-events: auto;
}

这是它工作的一支笔。 pointer-events仅适用于 IE11，因此如果您需要支持 IE10，则必须添加某种解决方法。