请查看以下codepen。
对于桌面上的用户,该示例按预期工作。如果将图像悬停,则会显示叠加层,并且可以单击链接。
但是在移动设备上,此解决方案存在一些问题。我想要的是单击图像即可显示叠加层。然后,第二个链接应以外部页面为目标。只要单击图像底部,此方法就可以正常工作,但是单击图像顶部时(在叠加层中链接所在的区域),它将停止工作。
如果我理解正确,那是因为叠加层是即时显示的,这意味着该链接也是即时可见和可点击的。因此,问题是如何强制示例首先显示叠加层,然后激活链接。
旁注:我无法使用通过display: none
和display: 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;
}