我正在运行一个 Wordpress 网站并且遇到了一个问题，我需要在移动设备上单击两次链接才能使链接真正起作用。我认为这可能是由于 :hover 在我的 CSS 中造成的，但是即使在删除它之后，我仍然需要在移动设备上单击该链接两次。
我所有的产品标题、图片和主页上的 CTA 按钮都会出现这种情况。
.product_item img:hover
.product_item p a:hover
.check_it_out:hover
谁能帮我确定如何解决这个问题？
有问题的网站是这个https://ecoshopr.com/
【问题讨论】：
我假设您只在 iOS 上看到了这个，它有这样的已知问题。导致 iOS Safari 出现此类问题的罪魁祸首首先由 Nicolas Zakas 解释：iOS has a :hover problem
要恢复：
iOS 具有使用 CSS :hover 规则的平台特定行为，旨在适应旧版桌面 :hover(s) 并尝试使它们在不更改的情况下在触摸设备上工作。虽然该解决方案没问题，并使此类网站按预期工作。它也可能造成冲突。
如博文所述，触发此行为的原因或多或少：
“
:hover使用可见性或显示隐藏或显示另一个元素的规则”。
在您的用例中，对于 links，触发此行为的原因似乎是 :hover 上的链接 color 的更改，在全局 @ 顶部带有 !important CSS 声明987654332@规则...
出于好奇，我在 iOS 模拟器上调试了您的 :hover 规则。删除!important 似乎足以解决它。其他链接相同或相似的地方需要更改。
对于图片，opacity 过渡是防止第一次点击触发的:hover 操作。
要解决这个问题，应该在 :hover+transition 规则上添加 not(:focus)。
【讨论】：
a { transition: all; } 可能会让这里变得困难。因为它会触发所有类型的转换...如果是这种情况，您需要完全删除 :hover 上的 color 更改和/或可能是 border: bottom （无论如何悬停都很奇怪）也是。或者，与图像类似，将:not(:focus) 添加到.product-title-hp a:hover 声明中。
原来我的主题是使用一些导致问题的 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.
});
});*/
问题已解决。
【讨论】：