如何删除/忽略：在触摸设备上悬停CSS样式

Question

:hover如果用户通过触摸设备访问我们的网站，我想忽略所有CSS声明。因为:hoverCSS没有意义，而且如果平板电脑在单击/点击时触发CSS，则CSS甚至可能会受到干扰，因为它可能会一直停留直到元素失去焦点。老实说，我不知道为什么触摸设备首先感觉到需要触发:hover-但这是现实，所以这个问题也是现实。

a:hover {
   color:blue;
   border-color:green;
   // etc. > ignore all at once for touch devices
}

因此，:hover在声明触摸设备后，如何（如何）可以立即删除/忽略所有CSS 声明（而不必知道每个CSS ）？

Answer 1

如果您对为什么或有什么其他选择感兴趣，请继续阅读。

Quick’n’dirty-使用JS删除：hover样式

您可以删除所有包含:hover使用Javascript 的CSS规则。这样做的优点是不必接触CSS，即使与较旧的浏览器也兼容。

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

限制：样式表必须托管在 同一域中 （这意味着没有CDN）。禁用在Surface和iPad Pro
等混合鼠标和触摸设备上徘徊的功能，这会伤及UX。

仅CSS-使用媒体查询

将所有：hover规则放在一个@media块中：

@media (hover: hover) {
  a:hover { color: blue; }
}

或者，替代所有悬停规则（与旧版浏览器兼容）：

a:hover { color: blue; }

@media (hover: none) {
  a:hover { color: inherit; }
}

限制：使用WebView时，仅适用于iOS 9.0 +，Chrome for Android或Android 5.0+。hover: hover打破了旧版浏览器上的悬停效果，hover: none需要覆盖所有先前定义的CSS规则。两者均 与混合的鼠标和触摸设备不兼容 。

最强大-通过JS检测触摸并添加CSS：hover规则

此方法需要在所有悬停规则之前添加body.hasHover。（或您选择的班级名称）

body.hasHover a:hover { color: blue; }

的hasHover类可以使用加入hasTouch()从第一个例子：

if (!hasTouch()) document.body.className += ' hasHover'

但是，对于混合触摸设备，这可能会具有与先前示例相同的缺点，这将我们带到了最终解决方案。每当移动鼠标光标时启用悬停效果，每当检测到触摸时禁用悬停效果。

function watchForHover() {
  // lastTouchTime is used for ignoring emulated mousemove events
  let lastTouchTime = 0

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return
    document.body.classList.add('hasHover')
  }

  function disableHover() {
    document.body.classList.remove('hasHover')
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)

  enableHover()
}

watchForHover()

这基本上可以在任何浏览器中工作，并根据需要启用/禁用悬停样式。

//jsfiddle.net/dkz17jc5/19/