由于叠加,无法点击按钮？

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中为它编写一个特定的选择器.