如何防止触摸设备上的按钮的粘滞悬停效果 [英] 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.

• 我可以添加无悬停 class onuchend 为每个按钮，并使
  我的CSS像这样： button：not（.no-hover）：hover { background-color：
blue; } ，但这对性能可能是相当糟糕的，而且
  不会正确处理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.

我可以向 documentElement 添加使我的CSS
像这样： html：not（.touch）button：hover {background-color：blue;
} 但是，在使用touch和
鼠标的设备上也不能正常工作。

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?

推荐答案

您可以通过暂时从DOM中删除链接来删除悬停状态。请参见 http://testbug.handcraft.com/ipad.html

You can remove the hover state by temporarily removing the link from the DOM. See 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中你有：

And then in your HTML you have:

<a href="#" ontouchend="this.onclick=fix">test</a>

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