如何在仅触摸浏览器中激活 CSS :hover 事件？答案

【问题标题】：How to activate CSS :hover events in a touch only browser?如何在仅触摸浏览器中激活 CSS :hover 事件？
【发布时间】：2020-10-05 03:25:56
【问题描述】：

因为:hover 当然不支持仅触摸浏览器。

如果您将手指放在屏幕上，一些 CSS :hover 事件也可以通过纯触摸浏览器激活。

我想使用 touchmove 和 :hover css 工作。

有没有人可以解决在仅触摸浏览器中工作:hover 的方法？

【问题讨论】：

标签： jquery browser touch-event jquery-hover touchmove

【解决方案1】：

您可以向 touchstart 、 touchend 添加一个事件监听器，然后在该元素上触发触摸事件时向该元素添加一个类。然后，您可以在新添加的类的帮助下应用所有的悬停效果。

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_touch');
    });
});

然后在您的 css 文件中执行以下操作：

element:hover, element.hover_touch{
    rule : property:
}

【讨论】：

我也有与touchmove 和touchend 平行的mouseenter 和mouseleave 事件。

【解决方案2】：

简短回答：触摸设备上没有悬停。

可以在以下文章中找到更长的答案： https://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/

【讨论】：