通过可见性覆盖CSS - 覆盖中的链接在移动设备上无法点击

Question

请查看以下codepen。

对于桌面上的用户，该示例按预期工作。如果图像悬停，则会显示叠加层，并且可以单击链接。

但是在移动设备上我遇到了一些问题。我想要的是点击图像显示叠加层。然后，第二个链接应该以外部页面为目标。只要单击图像的底部，这样就可以正常工作，但是当单击图像的顶部时（在链接位于叠加层的区域中）它会停止工作。

如果我理解正确的话，这是因为叠加层是即时显示的，这意味着链接也是可见的，并且可以即时点击。所以问题是如何强制示例首先显示叠加层，然后激活链接。

旁注：我无法使用通过display: none和display: block显示叠加层的解决方案，因为在我的实际情况中，叠加层定义了整个框的大小，但这对于这个例子并不重要，会使事情变得更复杂。

提前感谢您的努力。

Answer 1

此摘要将为触摸屏启用悬停效果

Preview / Demo

document.addEventListener("touchstart", function() {}, true);

并添加aria-haspopup="true"和onclick=""

<div class="overlay" aria-haspopup="true" onclick="">
    <a href="https://google.com" target="_blank">Testlink to Google</a>
  </div>

和此CSS &:focus .overlay

&:hover .overlay, &::focus .overlay, &:active .overlay {
    visibility: visible;
  }