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

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

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

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/