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

Answer 2

使用span而不是之前和之后，

之类的东西

<a href="my link"><img  class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>

跨度不会覆盖可点击区域

Answer 3

可能有很多不同的东西... 一定要尝试检查您是否对作为元素父元素的其他元素使用了任何 z-index 属性。我遇到了完全相同的问题，并通过故障排除修复了它：我所做的是拉出一个 javascript 文件并控制台记录我点击的目标类名（可以通过以下方式完成：

    window.addEventListener('click' , (e) => {
        const target = e.target.className; 
        console.log(target);
    })

)

完成后，单击似乎不起作用的按钮。确保在此之前向您的按钮添加一个类，并检查该类是否正确显示。有时，就我而言，我不得不将控制台移出窗口。

由此，我发现我的 SVG 动画实际上占据了覆盖按钮的不可见空间。为了解决这个问题，我所要做的就是给 SVG 一个 -1 的 z-index。

希望这有帮助！我知道我花了很长时间才找到解决方案，所以我希望我的解决方案也能帮助其他人。

注意：还要检查按钮和其他元素的指针事件（确保它没有设置为无）

由于叠加层，无法点击按钮？

3 个答案: