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

2022-01-22 00:00:00 hover javascript css touch

我创建了一个带有始终可见的上一个和下一个按钮的轮播.这些按钮有一个悬停状态，它们变成蓝色.在 iPad 等触控设备上，悬停状态是粘性的，因此在点击后按钮会保持蓝色.我不想那样.

I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don't want that.

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

  • I could add a no-hover class ontouchend for each button, and make my CSS like this: button:not(.no-hover):hover { background-color: blue; } but that's probably quite bad for performance, and doesn't handle devices like the Chromebook Pixel (which has both a touchscreen and a mouse) correctly.

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

I could add a touch class to the documentElement and make my CSS like this: html:not(.touch) button:hover { background-color: blue; } But that also doesn't work right on devices with both touch and a mouse.

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

What I would prefer is removing the hover state ontouchend. But it doesn't seem like that is possible. Focusing another element doesn't remove the hover state. Tapping another element manually does, but I can't seem to trigger that in JavaScript.

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

All the solutions I have found seem imperfect. Is there a perfect solution?

推荐答案

由于这部​​分 CSS Media查询级别 4 现在已自 2018 年起广泛实施，您可以使用它:

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

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

或者用英文:如果浏览器支持正确/真实/真实/非模拟悬停(例如具有类似鼠标的主要输入设备)，则在 button 时应用此样式悬停在上面."

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

对于未实现此功能(或在此原始答案时尚未实现)的浏览器，我写了一个 polyfill 来处理这个问题.使用它，您可以将上述未来主义的 CSS 转换为:

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
    background-color: blue;
}

(.no-touch 技术的一种变体)然后使用来自检测对悬停支持的同一 polyfill 的一些客户端 JavaScript，您可以切换 my-true-hover 相应的类:

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

相关文章