javascript - 如何防止触摸设备上按钮的粘性悬停效果

Question

我创建了一个旋转木马，其中有一个始终可见的上一个和下一个按钮。这些按钮有一个悬停状态，它们变成蓝色。在 iPad 等触摸设备上，悬停状态是粘性的，因此按钮在点击后保持蓝色。我不想这样。

• 我可以为每个按钮添加一个 no-hover 类 ontouchend，然后 我的 CSS 是这样的: button:not(.no-hover):hover { background-color: 蓝色的; } 但这对性能来说可能很糟糕，而且不会 处理像 Chromebook Pixel 这样的设备(它既有 触摸屏和鼠标)正确。

• 我可以将 touch 类添加到 documentElement 并制作我的 CSS 像这样: html:not(.touch) button:hover { background-color: blue; 但这也不适用于同时具有触摸和 鼠标。

我更喜欢删除悬停状态 ontouchend。但这似乎不可能。聚焦另一个元素不会移除悬停状态。手动点击另一个元素可以，但我似乎无法在 JavaScript 中触发它。

我找到的所有解决方案似乎都不完美。有没有完美的解决方案？

Answer 1

由于CSS Media Queries Level 4的这一部分|现在已经widely implemented since 2018 ，你可以使用这个:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

或者用英文:“如果浏览器支持适当的/真实的/真实的/非模拟的悬停(例如，有一个类似鼠标的主要输入设备)，那么当 button 悬停时应用这个样式结束了。”

对于没有实现此功能的浏览器(或在最初回答时没有)，I wrote a polyfill来处理这个。使用它，您可以将上面的 future 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);
});