肮脏的方式…这并不优雅，但却是最简单的方法。

删除任何特征悬停。

.your-class:hover:before {
  color: blue;
  background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}

@media all and (min-width:320px) and (max-width: 960px) {
    .your-class:hover:before {
    color: black;
    background: transparent;
  }
}

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

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

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

感谢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中工作。

我目前正在处理一个类似的问题。

我马上想到了两个主要的选择:(1)用户字符串检查，或者(2)使用不同的URL维护单独的移动页面，让用户选择对他们更好的。

如果您能够使用互联网磁带语言(如PHP或Ruby)，您可以检查请求页面的设备的用户字符串，并简单地提供相同的内容，但使用<link rel="mobile.css" />而不是常规样式。

用户字符串包含浏览器、渲染器、操作系统等标识信息。你可以决定哪些设备是“触控”的，哪些是非触控的。您可以在某个地方找到这些信息，并将其映射到您的系统中。

A. If you're allowed to ignore old browsers, you just have to add a single rule to the normal, non-mobile css, namely: EDIT: Erk. After doing some experimentation, I discovered the below rule also disables the ability to follow links in webkit-browsers in addition to just causing aesthetic effects to be disabled - see http://jsfiddle.net/3nkcdeao/ As such, you'll have to be a bit more selective as to how you modify rules for the mobile case than what I show here, but it may be a helpful starting point:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

作为附带说明，在父元素上禁用指针事件，然后在子元素上显式启用它们，当前会导致在父元素上的任何悬停效果在子元素进入:hover时再次激活。 参见http://jsfiddle.net/38Lookhp/5/

B.如果你支持传统的web渲染器，你将不得不做更多的工作，删除任何在:hover期间设置特殊样式的规则。为了节省每个人的时间，你可能只需要在你的标准样式表上运行一个自动复制+ seding命令来创建移动版本。这将允许您只编写/更新标准代码，并删除任何使用:hover用于页面移动版本的样式规则。

(I)或者，简单地让你的用户知道除了你的website.com之外，你还有一个m.website.com用于移动设备。虽然子域名是最常见的方法，但您也可以对给定URL进行其他可预测的修改，以允许移动用户访问修改后的页面。在这个阶段，您希望确保他们不必每次导航到站点的另一部分时都修改URL。

在这里，您可能只需要向样式表添加一两个额外的规则，或者使用sed或类似的实用程序强制执行稍微复杂一些的操作。它可能是最容易应用的:不应用于你的样式规则，如div:not(.disruptive):hover{…其中，你可以添加class="disruptive"到使用js或服务器语言对移动用户做讨厌的事情的元素中，而不是破坏CSS。

(II) You can actually combine the first two and (if you suspect a user has wandered to the wrong version of a page) you can suggest that they switch into/out of the mobile-type display, or simply have a link somewhere which allows users to flop back and forth. As already-stated, @media queries might also be something to look use in determining what's being used to visit. (III) If you're up for a jQuery solution once you know what devices are "touch" and which aren't, you might find CSS hover not being ignored on touch-screen devices helpful.

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

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

这可能不是一个完美的解决方案(它是用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");
});