iOs移动设备中的链接悬停问题答案

【问题标题】：Hover problem with links in iOs mobile devicesiOs移动设备中的链接悬停问题
【发布时间】：2020-07-24 17:06:33
【问题描述】：

我在带有链接的图像中使用悬停 (css) 来显示文本。它在桌面和安卓设备上都能完美运行（如果您在图片中单击一秒钟，然后将鼠标悬停在移动设备上）。

问题是我在 iOs 设备中意识到，当您在链接中单击一秒钟时，它会打开一个带有几个选项的窗口：在新标签页中打开、下载链接文件、复制、分享...

有什么方法可以通过 iOs 在移动设备中实现悬停？

.links-home a:hover p,
.links-home:hover .not-exhibited {
    transition: opacity 0.5s;
    opacity: 1;
    text-align: center;
}

【问题讨论】：

移动设备不像计算机。事实上，在您的计算机上，您可以将鼠标放在按钮上方，而在手机上，您没有任何鼠标和光标。至少，您可以在链接上保留:hover 属性，但在重定向之前它是可见的。我建议您在移动设备上使用 @media 查询时删除所有 :hover 属性

标签： html css

【解决方案1】：

使用@media-Query 尝试将:hover 替换为:focus。
我无法对此进行测试，因为我没有 iOS 设备，但根据this post，该项目一直保持焦点，直到单击另一个项目，因此短按足以显示额外的文本。
也许您必须将图像放入锚点 (<a>) 才能使焦点正常工作。

【讨论】：