html - 由于覆盖无法单击按钮？

Question

这是HTML

<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>

这是CSS

.navs:after {
  content: "";
  position: absolute;
  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: #0d0d0d;
  opacity: 0.5;
  transform: scaleY(0);
  transform-origin: 0 100%;
  transition: all .2s ease-out;
}
.navs:hover:after{
  transform: scaleY(1);
}
.navs:active:after{
    background: #FFFFFF;
}

我认为我不能点击按钮的原因是当我点击按钮时，叠加层形成。不过，我不想删除覆盖层。有什么方法可以点击叠加层吗？

Answer 1

选项一

你可以给你的元素一个更高的z-index。这会将您的按钮移动到叠加层上方，以便您可以单击它

方案二

您可以使用 pointer-events:none; 禁用叠加层上的所有鼠标事件，这样点击事件将“落入”它并且按钮将注册它

编辑:尽可能使用指针事件，让 z-index 成为您的备份计划。如果您转而使用它，我建议您不要内联使用它，而是在您的 CSS 中为它编写一个特定的选择器。