html - 必须点击两次才能在移动设备上打开网站链接

Question

我正在运行一个 Wordpress 网站，但遇到了一个问题，我需要在移动设备上单击链接两次才能使链接真正起作用。我认为这可能是由于 :hover 在我的 CSS 中造成的，但即使删除它后，我仍然需要在移动设备上单击该链接两次。

我主页上的所有产品标题、图片和 CTA 按钮都会出现这种情况。

.product_item img:hover
.product_item p a:hover
.check_it_out:hover

谁能帮我确定如何解决这个问题？

有问题的网站是这个 https://ecoshopr.com/

Answer 1

我假设您仅在 iOS 上看到此内容，该版本存在此类已知问题。 Nicolas Zakas 首先解释了 iOS Safari 出现此类问题的罪魁祸首:iOS has a :hover problem

要恢复: iOS 具有 CSS :hover 规则的特定于平台的行为，旨在适应旧版桌面 :hover 并尝试使它们无需更改即可在触摸设备上运行。虽然该解决方案还不错，并且使此类网站按预期工作。它还可能造成冲突。

正如博客文章中所述，触发此行为的原因或多或少是:

"a :hover Rule that either hides or shows another element using visibility or display".

在您的用例中，对于链接，触发此行为的原因似乎是 :hover 上的链接 color 的更改!important 位于全局 a {transition: all; 之上的 CSS 声明} 规则...

出于好奇，我在 iOS 模拟器上调试了您的 :hover 规则。删除 !important 似乎足以解决这个问题。其他链接也需要更改相同或相似的内容。

对于图像，不透明度转换是防止第一次点击触发的:hover操作。

要解决这个问题，应该在 :hover+transition 规则上添加 not(:focus) 。