javascript - JS 覆盖菜单不显示

Question

我想显示 this全屏覆盖菜单(效果很好)在我的网页上，在左上角。到目前为止我的代码可以看到here .

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

我更改了覆盖菜单的一些 z-index 值，但是当我这样做时，主页导航(称为 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;
}

Here's a Pen of it working. pointer-events 仅适用于 IE11，因此如果您需要支持 IE10，则必须添加某种解决方法。