请查看以下codepen

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

但是在移动设备上,此解决方案存在一些问题。我想要的是单击图像即可显示叠加层。然后,第二个链接应以外部页面为目标。只要单击图像底部,此方法就可以正常工作,但是单击图像顶部时(在叠加层中链接所在的区域),它将停止工作。

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

旁注:我无法使用通过display: nonedisplay: block显示叠加层的解决方案,因为在我的实际情况下,叠加层定义了完整盒子的大小,但这对本示例而言并不重要,并且会使事情变得更复杂。

在此先感谢您的努力。

最佳答案

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

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

09-11 18:44
查看更多