以编程方式从移动设备上的元素中删除“悬停状态”

Question

我在网页上有一个元素，具有一组已定义的:hover 样式。在移动设备上，这会导致“粘滞悬停”效果，其中触摸元素将导致悬停应用，然后当用户触摸页面上的其他位置时将其移除。

这对我来说是可取的 - 我不想阻止这种情况，但我需要一种方法来在用户与之交互后以实用的方式移除悬停状态（以将元素返回到其原始状态）。

这可能吗？我尝试了$('some-other-element').click()，但除了手动单击页面上的其他位置之外，没有任何东西可以删除该状态。

Answer 1

不要使用 :hover，而是将其设为 .hover 之类的类。

然后使用jQuery如添加和删除它

$(".your-button").on("mouseenter", function()
{
    $(this).addClass("hover");
});

$(".your-button").on("mouseleave", function()
{
    $(this).removeClass("hover");
});


// Explicitly remove it
$(".your-button").removeClass("hover");

编辑：如果你想使用点击方法。您可能需要让它点击可聚焦的东西。

最后你也可以尝试使用 :active 要求。