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

请看以下内容

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

但是在移动设备上，这个解决方案有一些问题。我想要的是，点击图像显示覆盖。第二个链接应该指向外部页面。只要单击图像的底部，它就可以正常工作，但单击图像的顶部（在覆盖中链接所在的区域）时，它就会停止工作

如果我理解正确的话，这是因为覆盖是即时显示的，这意味着链接也是即时可见和可点击的。因此，问题是如何强制示例首先显示覆盖，然后激活链接

旁注：我不能使用通过

display:none

和

display:block

显示覆盖的解决方案，因为在我的实际情况中，覆盖定义了整个框的大小，但这对于本例并不重要，并且会使事情变得更复杂

---

提前感谢您的努力。

此片段将为触摸屏启用悬停效果

并添加

aria haspoop=“true”

和

onclick=“

---

你有没有试过搞乱覆盖层/链接层的z索引？另外，您不能在移动设备上执行悬停效果，这可能是您的问题的一部分。这在Android设备上运行良好，但在iOS设备上仍需要一些工作。有一个解决方案应该是使用空的

onclick

属性。看一看。我认为

z-index

在这里没有多大帮助，是吗？指针事件

如何：无规则？将其添加到覆盖中，直到其可见，并在显示时删除。这将导致单击事件通过覆盖层落在下面的图像上。编辑：支持可能是脆弱的，看你的意思是喜欢。不幸的是，尽管这个想法很好，但这并不奏效。也许唯一的解决方案是在
指针事件：auto
上增加一个小延迟，这样在延迟之后链接就可以点击了。另一方面，对于这样的操作，我总是尽量避免使用javascript。正如您所提到的，这个解决方案的浏览器支持并不理想（仅限IE11+）。好的，我已经创建了一个使用
指针事件
和jQuery组合的工作示例。你可以找到它。其思想是在默认情况下设置
指针事件：none
，并使用jQuery将其重写为
指针事件：auto
，只需很短的延迟。我想知道，如果不使用jQuery，是否可以实现同样的想法。
document.addEventListener("touchstart", function() {}, true);

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

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