如何阻止：悬停状态在触摸屏上处于活动状态？答案

【问题标题】：How to stop the :hover state from being active on a touchscreen?如何阻止：悬停状态在触摸屏上处于活动状态？
【发布时间】：2015-02-22 00:40:57
【问题描述】：

在我的站点http://www.robertfikesiv.com/ 上，当您使用 :hover 事件触摸元素时，:hover 属性将保持活动状态，直到触摸具有 :hover 属性的另一个元素。使属性不再处于活动状态的唯一方法是刷新页面。

我如何为触摸屏设备禁用 :hover 事件？

【问题讨论】：

使用 mordernizr 查找设备是否为触摸屏，然后基于它添加一个类，并可能覆盖您的 :hover 属性。只是一个想法参考：stackoverflow.com/questions/4817029/…

标签： css hover touch

【解决方案1】：

您可以向标识非触摸设备的 html 元素添加一个类，并在第一个 'touchstart' 事件中删除该类。下面的代码是一个基本的例子，但它应该可以工作。

HTML

<html class="notouch">...

CSS

.notouch .clickable:hover{
   color: #f00;
}

document.documentElement.addEventListener('touchstart', function(){
    var className = document.querySelector('html').className;
    document.querySelector('html').className = className.replace(/notouch/, '');
}, false);

【讨论】：

【解决方案2】：

研究一个方便的新事物，称为指针事件。如果你把 pointer-events: none 放在一个元素上，那么悬停和点击事件将被禁用，即使在 JS 中也是如此。

【讨论】：