我们如何防止触摸设备按钮出现粘滞悬停效果？

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

为桌面和支持触摸的设备创建用户界面时，至关重要的是要解决按钮上粘滞悬停效果的问题。在触摸设备上，悬停状态（通常通过更改元素的背景颜色来指示）可能会卡住，即使在释放按钮后也是如此。

防止粘性悬停效果的解决方案

已经提出了几种解决方案来解决这个问题问题：

• 删除悬停类：虽然此方法很简单，但效率较低，并且可能无法在同时支持触摸和鼠标输入的设备上正常工作。
• 添加触摸类：这种技术也有局限性，因为它不考虑混合输入的设备

首选解决方案

理想的解决方案是删除 touchend 上的悬停状态。然而，这似乎通过传统方法无法实现，例如聚焦另一个元素或触发 JavaScript 中的手动点击。

媒体查询级别 4 解决方案

但是，随着 CSS 的广泛实施自 2018 年起媒体查询级别 4，有一个更优雅的解决方案可用：

这个 CSS规则规定，当浏览器支持真正的悬停（通常表示使用类似鼠标的主要输入设备）时，悬停样式将应用于按钮。这可以有效防止触摸设备上的悬停效果。

旧版浏览器的 Polyfill

对于不支持 CSS 媒体查询级别 4 的浏览器，可以使用 Polyfill用于实现类似的解决方案：

polyfill 中的 JavaScript 代码可以切换 my-true-hover基于悬停支持的类：

通过使用此解决方案，开发人员可以确保按钮在桌面浏览器上具有适当的悬停效果，同时防止在支持触摸的设备上出现粘性悬停效果。

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