如何消除触摸设备按钮上的粘滞悬停效果？

如何消除支持触摸的设备按钮上的粘滞悬停效果

使用永久导航按钮创建轮播时，会出现一个常见问题触摸设备。按钮的悬停状态（通常显示为蓝色）变得“粘性”，即使在点击后仍保持激活状态。已经探索了解决此问题的几种方法：

• 在 touchend 上添加 no-hover 类可以解决该问题，但它可能会影响性能，并在同时具有触摸和鼠标功能的 Chromebook 等设备上引入兼容性问题
• 为 documentElement 实现触摸类并相应修改 CSS 也可以解决该问题，但对于同时具有触摸和鼠标的设备来说这并不是最佳选择支持。

理想的解决方案是在触摸结束时删除悬停状态。然而，没有直接的方法可用于此。聚焦于另一个元素并不会消除悬停状态。虽然手动点击另一个元素确实如此，但在 JavaScript 中以编程方式触发此操作仍然是一个挑战。

要有效解决此问题，您可以利用 CSS 媒体查询级别 4 的最新开发：

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

此 CSS 实质上指出，“如果设备支持真正的悬停（例如，具有类似鼠标的主要输入设备），则应用按钮悬停

对于尚未实现此功能的浏览器，可以利用 JavaScript 填充来检测悬停支持并切换自定义类，从而允许您有条件地应用悬停样式：

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

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

该解决方案有效消除了触摸设备的粘滞悬停效果，同时在使用鼠标输入的设备上保持所需的美观效果。

以上是如何消除触摸设备按钮上的粘滞悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！