在浏览了前面的答案之后，这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码，则删除

@media (hover: hover) {
  .toggle-label:hover {
     background-color: #69c9ff;
     color: #ffffff;
  }
}

这也是一个可能的解决方案，但你必须通过你的css和添加一个.no-touch类在你的悬停样式。

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

CSS例子:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

源

附注:但是我们应该记住，市场上有越来越多的触摸设备，它们同时也支持鼠标输入。

使用这个:https://jsfiddle.net/57tmy8j3/

如果你感兴趣的原因或其他选择，请继续读下去。

快速删除:使用JS的悬停样式

你可以使用Javascript删除所有包含:hover的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等混合鼠标和触摸设备上禁用悬停，这会损害用户体验。

仅css -使用媒体查询

把你所有的:hover规则放在一个@media块中:

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

或者，重写你所有的悬停规则(与旧浏览器兼容):

a:hover { color: blue; }

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

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

最健壮的-通过JS和preend CSS检测触摸:悬停规则

这个方法需要在所有悬停规则前加上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()

这应该基本上适用于任何浏览器，并根据需要启用/禁用悬停样式。

这里是完整的例子——modern: https://jsfiddle.net/57tmy8j3/ 遗留(用于旧浏览器):https://jsfiddle.net/dkz17jc5/19/

要使当前的答案也在IE11中工作(如果你仍然支持它的话):

@media (hover: hover) and (pointer: fine)， only screen and (-ms-high-对比度:active)， (-ms-high-对比度:none) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>

根据Jason的回答，我们只能用纯css媒体查询来解决不支持悬停的设备。我们也可以只处理支持悬停的设备，就像moogal在类似问题中的回答一样 @media not all and(悬停:none)。看起来很奇怪，但很有效。

为了更容易使用，我做了一个Sass mixin:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

更新2019-05-15:我推荐Medium的这篇文章，它介绍了我们可以使用CSS瞄准的所有不同设备。基本上，它是这些媒体规则的混合，针对特定目标将它们结合起来:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

针对特定目标的示例:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

我喜欢mixin，这就是我如何使用我的hover mixin只针对支持它的设备:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

它对我很有帮助:链接

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}