我也遇到过同样的问题(在我使用三星手机浏览器的情况下)，因此我偶然发现了这个问题。

感谢Calsal的回答，我发现了一些东西，我相信它将排除所有桌面浏览器，因为我尝试过的移动浏览器似乎都能识别它(参见编译表的截图:CSS指针特征检测表)。

MDN网络文档说明了这一点

指针CSS @media特性可用于应用基于的样式 用户的主要输入机制是否是指向设备，以及 如果是这样，它有多准确

.

我发现指针:coarse对于附件表中的所有桌面浏览器来说都是未知的，但是对于同一个表中的所有移动浏览器来说却是已知的。这似乎是最有效的选择，因为所有其他指针关键字值给出的结果都不一致。

因此，您可以像Calsal描述的那样构造一个媒体查询，但稍加修改。它使用了一种反向逻辑来排除所有的触摸设备。

Sass混合:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

CSS编译:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

我在研究这个问题后创建的这个要点中也描述了它。 代码依赖于实证研究。

更新(2018): 在撰写此更新时，2018-08-23，并由@DmitriPavlutin指出，这种技术似乎不再适用于Firefox桌面。

更新(2021): 有人向我指出，它似乎在Firefox 87中工作。

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

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

这可能不是一个完美的解决方案(它是用jQuery的)，但也许它是一个方向/概念的工作:如何反过来做呢?这意味着在默认情况下取消:hover css状态，并在文档的任何地方检测到鼠标移动事件时激活它们。当然，如果有人停用js，这是行不通的。还有什么会反对这样做呢?

也许是这样的:

CSS:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

使用这个: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/

这也是一个可能的解决方案，但你必须通过你的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>

源

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

试试这个(我在这个例子中使用background和background-color):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}