由于覆盖而无法单击按钮？

这是 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;
}

我认为我无法单击该按钮的原因是因为当我单击该按钮时，会形成叠加层。但我不想删除覆盖层。有什么办法可以点击覆盖层吗？

选项一

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

选项二

您可以使用以下命令禁用覆盖层上的所有鼠标事件pointer-events:none;所以点击事件将“通过”它并且按钮将注册它

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