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

javascript css touch hover

2022-08-30 01:41:39

我创建了一个轮播，其中包含始终可见的上一个和下一个按钮。这些按钮具有悬停状态，它们会变为蓝色。在触摸设备（如 iPad）上，悬停状态为粘滞状态，因此按钮在点击后保持蓝色。我不想那样。

我可以为每个按钮添加一个类，并使我的CSS像这样：但这可能对性能非常不利，并且不能正确处理像Chromebook Pixel这样的设备（它同时具有触摸屏和鼠标）。no-hoverontouchendbutton:not(.no-hover):hover { background-color: blue; }
我可以添加一个类，让我的CSS像这样：但这在同时具有触摸和鼠标的设备上也不起作用。touchdocumentElementhtml:not(.touch) button:hover { background-color: blue; }

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

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

答案 1

由于CSS媒体查询级别4的这一部分自2018年以来已广泛实施，因此您可以使用它：

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

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

对于没有实现这个（或者在这个原始答案时没有实现）的浏览器，我写了一个polyfill来处理这个问题。使用它，您可以将上述未来主义的CSS转换为：

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

（技术的变体）然后使用来自检测悬停支持的同一polyfill的客户端JavaScript，您可以相应地切换类的存在：.no-touchmy-true-hover

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

答案 2

您可以通过从 DOM 中临时删除链接来删除悬停状态。查看 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中，你有：

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