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

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