如何忽略触摸屏设备上的 :hover CSS 样式

挑战：克服触摸设备上的悬停显示问题

:hover CSS 属性在鼠标悬停在元素上时为元素添加交互式样式。然而，这在没有悬停概念的触摸设备上带来了问题。当用户与触摸屏上的元素交互时，这可能会导致意外行为或视觉障碍。

解决方案：

1。 JavaScript 删除 :hover 样式

使用 JavaScript，可以删除所有包含 :hover 的 CSS 规则，从而有效地在触摸设备上禁用此属性。然而，这种方法有缺点：

• 需要 CSS 修改以及旧版浏览器中的兼容性问题。
• 在混合输入设备（例如 Surface、iPad Pro）上禁用悬停效果，损害用户体验.

2.仅 CSS 媒体查询

在 @media 块中包含 :hover 规则可以禁用触摸设备上的悬停效果。但是，这种方法：

• 仅限于 iOS 9.0 和 Android 上的现代浏览器。
• 破坏旧版浏览器中的悬停效果或需要覆盖所有悬停规则，从而影响灵活性。

3. JavaScript 检测和 CSS Prepending

通过 JavaScript 检测触摸输入，可以将特殊类（例如 hasHover）添加到文档正文中。然后，所有 :hover 规则都可以在此类前面添加，以禁用触摸设备上的悬停效果。虽然这种方法效果很好，但在混合输入设备上仍然面临挑战。

4。动态悬停检测和类切换

此方法结合了 JavaScript 事件处理和类操作来动态切换悬停效果。它在检测到鼠标光标时启用悬停效果，并在发生触摸事件时禁用它们。这种方法提供了最强大的解决方案，适用于各种浏览器和输入设备。