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

Question

我正在运行一个Wordpress网站并遇到一个问题，我需要在移动设备上点击两次链接才能使链接真正起作用。我想这可能是由于：将鼠标悬停在我的CSS中，但即使在删除它之后，我仍然需要在移动设备上点击两次链接。

主页上的所有产品标题，图片和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，并尝试使其在触摸设备上无需更改即可运行。虽然该解决方案还可以，但是这些网站可以按预期工作。它也可能造成冲突。

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

  

“a :hover使用可见性或显示隐藏或显示其他元素的规则”。

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

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

对于图片，:hover转换是阻止第一次点击的not(:focus)操作。

要解决这个问题，请在:hover + transition规则上添加MPVolumeView。

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.
                });
    });*/

问题已经解决。