如何在移动设备上禁用按钮的悬停状态？

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专门访问。