我创建了一个带有始终可见的上一个和下一个按钮的轮播。这些按钮有一个悬停状态，它们变成蓝色。在 iPad 等触控设备上，悬停状态是粘性的，因此点击按钮后按钮会保持蓝色。我不想要那个。
我可以为每个按钮添加一个no-hover类ontouchend，并使我的 CSS 像这样：button:not(.no-hover):hover { background-color:
blue; }但这可能对性能很不利，并且不能正确处理像 Chromebook Pixel（具有触摸屏和鼠标）之类的设备。
我可以向 中添加一个touch类documentElement并使我的 CSS 像这样：html:not(.touch) button:hover { background-color: blue;
}但这也不适用于同时具有触摸和鼠标的设备。
我更喜欢的是删除悬停状态ontouchend。但这似乎不太可能。聚焦另一个元素不会删除悬停状态。手动点击另一个元素可以，但我似乎无法在 JavaScript 中触发它。
我找到的所有解决方案似乎都不完美。有没有完美的解决方案？
由于这部分CSS Media Queries Level 4自 2018 年以来已经广泛实施，您可以使用：
@media (hover: hover) {
button:hover {
background-color: blue;
}
}
或用英语：“如果浏览器支持正确/真实/真实/非模拟悬停（例如，具有类似鼠标的主要输入设备），则button在悬停 s时应用此样式。”
对于没有实现这个的浏览器（或者在这个原始答案的时候没有实现），我写了一个 polyfill来处理这个问题。使用它，您可以将上述未来派 CSS 转换为：
html.my-true-hover button:hover {
background-color: blue;
}
（该.no-touch技术的一种变体）然后使用来自同一个 polyfill 的一些客户端 JavaScript 来检测对悬停的支持，您可以相应地切换my-true-hover类的存在：
$(document).on('mq4hsChange', function (e) {
$(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});
您可以通过从 DOM 中临时删除链接来删除悬停状态。见http://testbug.handcraft.com/ipad.html
在 CSS 中，您有：
:hover {background:red;}
在 JS 你有：
function fix()
{
var el = this;
var par = el.parentNode;
var next = el.nextSibling;
par.removeChild(el);
setTimeout(function() {par.insertBefore(el, next);}, 0)
}
然后在你的 HTML 中你有：
<a href="#" ontouchend="this.onclick=fix">test</a>
这是一个普遍的问题，没有完美的解决方案。悬停行为对鼠标很有用，而对触摸则最不利。使问题更加复杂的是支持触摸和鼠标（同时，不少于！）的设备，如 Chromebook Pixel 和 Surface。
我发现的最干净的解决方案是仅在设备不支持触摸输入时启用悬停行为。
var isTouch = !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;
if( !isTouch ){
// add class which defines hover behavior
}
当然，您无法在可能支持它的设备上悬停。然而，有时悬停的影响不仅仅是链接本身，例如，您可能希望在悬停元素时显示菜单。这种方法允许您测试触摸的存在，并可能有条件地附加不同的事件。
我已经在 iPhone、iPad、Chromebook Pixel、Surface 和各种 Android 设备上对此进行了测试。我不能保证将通用 USB 触摸输入（例如手写笔）添加到混合中时它会起作用。
您可以覆盖不支持悬停的设备的悬停效果。喜欢：
.my-thing {
color: #BADA55;
}
.my-thing:hover {
color: hotpink;
}
@media (hover: none) {
.my-thing {
color: #BADA55;
}
}
在 iOS 12 上测试和验证
使用Modernizr，您可以专门针对非触摸设备进行悬停：
（注意：这不会在 StackOverflow 的代码段系统上运行，而是检查jsfiddle）
/* this one is sticky */
#regular:hover, #regular:active {
opacity: 0.5;
}
/* this one isn't */
html.no-touch #no-touch:hover, #no-touch:active {
opacity: 0.5;
}
请注意，:active不需要针对.no-touch它，因为它在移动设备和桌面设备上都可以正常工作。