css - 如何禁用手机上按钮的悬停状态？

Question

我有一个带有“关注”的“关注”按钮，单击该按钮会更改一个类，并且可见的文本是“关注”。悬停时，此更改为“取消关注”。

工作得很好。在移动（电话）上，单击它似乎会将其锁定为“悬停”状态。结果，它完全绕过了“关注”并显示“取消关注”。如果我点击屏幕上的其他位置，它会自行“修复”。

有什么办法可以让这种情况自动发生吗？$('body').click()没有为我做任何事...

Answer 1

您可以在 jquery 中使用 touchstart/touchend 事件。如果您只使用 CSS，我不知道有什么解决方案，但是除了悬停事件之外，您还可以将普通函数绑定到 touchstart/touchend 事件，或者执行以下操作。

$('.button').bind('touchstart',function(){
    $(this).addClass('hoverClass');
});
$('.button').bind('touchend',function(){
    $(this).removeClass('hoverClass');
});

这只是让您的“hoverClass”根据需要通过 CSS 更改按钮。我希望这足够清楚。基本上，touchstart/touchend 类似于悬停，但据我所知，不能仅通过 CSS 访问。