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

Question

我正在运行创建一个 Wordpress 网站，运行遇到一个问题，我需要在移动设备上点击 link 两次才能显示 link实际工作。我认为这可能是由于 :hover 在我的 CSS 中，但是即使在删除它之后，我仍然需要在移动设备上单击 link 两次。

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

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

任何人都可以帮我确定如何解决这个问题吗？

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

Answer 1

我假设您只在 iOS 上看到这个，它有这样的已知问题。 iOS Safari 出现此类问题的罪魁祸首已由 Nicolas Zakas 首次解释为：iOS has a :hover problem

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

如博客 post 所述，触发此行为的或多或少是：

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

在您的用例中，对于 links，似乎触发此行为的是 link color :hover 在全局 a { transition: all; } 规则之上有一个 !important CSS 声明...

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

对于图片，opacity 过渡是 :hover 防止第一次点击触发的动作。

要解决这个问题，在 :hover+transition 规则上添加 not(:focus) 就可以了。

Answer 2

原来我的主题使用了一些导致问题的 JS。一旦我从我的 init.js 文件中删除它：

/* button show */
        $/*('.product_item').mouseenter(function(){
                $(this).find('.product_button').fadeIn(100, function() {
                        // Animation complete.
                });
    }).mouseleave(function(){
                $(this).find('.product_button').fadeOut(100, function() {
                        // Animation complete.
                });
    });*/

问题已解决。

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

Having to click twice to open site links on mobile

html

css

hover

touch