如何防止触摸设备上按钮的粘滞悬停效果 [英] How to prevent sticky hover effects for buttons on touch devices

问题描述

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

这篇关于如何防止触摸设备上按钮的粘滞悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！