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

小编典典

all

我创建了一个带有始终可见的上一个和下一个按钮的轮播。这些按钮有一个悬停状态，它们变成蓝色。在 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 中触发它。

我发现的所有解决方案似乎都不完美。有完美的解决方案吗？

阅读 178

2022-08-01

共1个答案

小编典典

由于CSS Media Queries Level
4的这一部分自 2018
年以来已被广泛实施，您可以使用以下代码：

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

或者用英语：“如果浏览器支持正确/真实/真实/非模拟悬停（例如具有类似鼠标的主输入设备），则在buttons 悬停时应用此样式。”

对于没有实现这个的浏览器（或者在这个原始答案的时候没有实现），我写了一个
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);
});

2022-08-01