如果用户通过触摸设备访问我们的网站，我希望忽略所有的 :hover CSS 声明。因为 :hover 在这种情况下是没有意义的，而且如果一个平板电脑在点击/轻敲时触发它，则可能会一直持续到元素失去焦点，甚至可能会干扰用户体验。说实话，我不知道为什么触摸设备需要首先触发 :hover，但这是现实，所以这个问题也是真实存在的。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
那么，我应该如何一次性删除/忽略所有CSS :hover 声明（不需要知道每个声明）以适应触摸设备？
简短版：使用https://jsfiddle.net/57tmy8j3/
如果您想了解为什么或其他选项，请继续阅读。
您可以使用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，这会损害用户体验。
将所有的: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: none 需要覆盖先前定义的所有CSS规则。两者都与混合鼠标和触摸设备不兼容。
使用此方法需要将所有悬停规则与body.hasHover（或您选择的类名）一起添加在前面。
body.hasHover a:hover { color: blue; }
可以使用第一个示例中的 hasTouch() 方法添加 hasHover 类：
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()
这基本上适用于任何浏览器，并根据需要启用/禁用悬停样式。
这是完整的示例 - 现代浏览器：https://jsfiddle.net/57tmy8j3/
传统浏览器（用于旧浏览器）：https://jsfiddle.net/dkz17jc5/19/
try/catch 以防万一出现一些奇怪的错误，可能会导致脚本崩溃，比如由于同源策略或 IE 上不稳定的支持而导致 deleteRule 无法工作（已编辑注释以反映这一点）。但是，在大多数情况下，只需要进行简单的检查就足够了。 - bladeli, a:hover { border: 1px solid red; }，selectorText 会是 li, a:hover。使用这段代码会使所有的 li 失去它们的边框，只有 a:hover 应该失去它们的边框。 - Haneevhover CSS 媒体特性来拯救了！只需使用 CSS，您就可以在设备没有 hover 功能时覆盖样式。
下面的演示受到现代触控设备的支持。
/* hover query styles */
a {
color: red;
font-size: 3em;
}
a:hover {
color: blue;
}
@media (hover: none) {
a:link,
a:visited {
color: blue;
text-decoration: none;
border: 0.1em solid currentColor;
padding: 0 0.1em;
}
}
/* used to show if demo browser has hover capabilities */
.detection:before {
content: 'UNKNOWN';
color: red;
}
@media(hover) {
.detection:before {
content: 'YES';
color: green;
}
}
@media (hover: none) {
.detection:before {
content: 'NO';
}
}<p>Hoverable pointer detected: <span class="detection"></span></p>
<h3>Experiences between device hover capabilities</h3>
<p>If the device has a hover capability, the link below:</p>
<ul>
<li>should be red</li>
<li>should be blue when hovered</li>
</ul>
<p>If the device does not have a hover capability, the link below:</p>
<ul>
<li>should always be blue</li>
<li>should be surrounded by a blue border</li>
</ul>
<p><a href="https://www.google.com">Link</a></p>注意：请记住，由于Surface PC的主要输入（功能）是鼠标，因此即使它是一个分离的（平板电脑）屏幕，它也将最终成为一个蓝色链接。 浏览器将始终默认为最精确的输入功能。
根据 Jason 的回答，我们可以使用纯 CSS 媒体查询来仅针对不支持悬停的设备进行处理。我们也可以像类似问题中 moogal 的答案 中那样仅针对支持悬停的设备进行处理，使用@media not all and (hover: 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;
}
}
我遇到了相同的问题（在我的情况下是与三星移动浏览器），因此我偶然发现了这个问题。
感谢Calsal的回答，我找到了一个我认为会排除几乎所有桌面浏览器的东西，因为它似乎被我尝试过的移动浏览器所识别（参见编译表中的屏幕截图：CSS指针功能检测表）。
MDN Web Docs的声明如下：
指针CSS @media 功能可用于基于用户的主要输入机制（是否为指针设备）应用样式，以及该设备的精度如何。
我发现的是，pointer：coarse是附加表中所有桌面浏览器都不知道的内容，但是同一表中的所有移动浏览器都知道。 这似乎是最有效的选择，因为所有其他指针关键字值都会产生不一致的结果。
因此，您可以像Calsal描述的那样构建一个媒体查询，但稍作修改。 它使用了一种相反的逻辑来排除所有触摸设备。
Sass mixin：
@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;
}
}
在我调研了这个问题之后，我创建了这个Gist中也有描述。
用于经验研究的Codepen。
更新（2018）： 截至撰写本更新，即2018年8月23日，并由@DmitriPavlutin指出，此技术似乎不再适用于Firefox桌面版。
更新（2021）： 有人向我指出，它似乎在Firefox 87上运行。
尝试这个：
@media (hover:<s>on-demand</s>) {
button:hover {
background-color: #color-when-NOT-touch-device;
}
}
更新：不幸的是，W3C已经将这个属性从规范中删除 (https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1)。
我目前正在处理一个类似的问题。
我立即想到了两个主要的选择：（1）用户字符串检查，或者（2）使用不同的URL维护单独的移动页面，并让用户选择哪个更好。
<link rel="mobile.css" />而不是普通样式。用户字符串包含有关浏览器、渲染器、操作系统等的标识信息。由您决定哪些设备是“触摸”设备和非触摸设备。您可以在某个地方找到此信息并将其映射到您的系统中。
A. 如果您被允许忽略旧浏览器，则只需向普通的非移动css添加一条规则，即： 编辑：Erk。经过一些实验，我发现下面的规则还会禁用WebKit浏览器中的链接跟踪功能，除了导致美学效果被禁用之外-请参见http://jsfiddle.net/3nkcdeao/
因此，您必须更加谨慎地选择如何修改移动情况下的规则，而不是我在这里展示的内容，但它可能是一个有用的起点：
* {
pointer-events: none !important; /* only use !important if you have to */
}
pointer-events - 真是太棒了！这正是我在寻找的，非常感谢！ - Simon Ferndriger<a>链接可能无法在pointer-events:none下访问。希望这种情况能够改变，或者CSS 3.x或4.0+将具有pointer-events:navigation-only或类似功能。 - Seldom 'Where's Monica' Needyfunction is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if ( is_touch_device() ) {
$('html').addClass('touch');
} else {
$('html').addClass('no-touch');
}
为了检测浏览器是否支持触摸事件，并将常规的CSS属性分配给具有html.no-touch类的元素，可以遍历该元素，如下所示：
html.touch a {
width: 480px;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
width: auto;
color:blue;
border-color:green;
}
html标签而不是body标签可能会使它更易于阅读。这实际上是我目前正在使用的解决方案。无论如何，谢谢。 - Simon Ferndriger@media (hover: hover) {
.toggle-label:hover {
background-color: #69c9ff;
color: #ffffff;
}
}
@media (hover: hover) and (pointer: fine), only screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
a:hover { color: red; }
}<a href="#" >Some Link</a>