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

Question

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

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

Answer 1

您可以通过从DOM临时删除链接来删除悬停状态。

在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中：

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