如何消除触控设备上不需要的 :hover CSS？

在支持触摸的设备上消除 :hover CSS

当用户通过触摸设备访问网站时，:hover CSS 声明可能会变得不可取，因为它们不能有效地响应触摸输入。用户可能会遇到持久的悬停效果，这可能会造成破坏。为了解决这个问题，有几种方法可以删除或忽略触摸设备上的 :hover 样式。

JavaScript 删除

一种方法是使用 JavaScript 消除所有 CSS 规则包含：悬停。此方法兼容旧版浏览器，不需要修改 CSS。通过检查设备是否支持触摸输入并迭代样式规则，JavaScript 可以删除所有 :hover 声明。

仅 CSS 媒体查询

另一个选项使用 @仅当设备支持悬停时，媒体查询才能限制 :hover 规则的应用。但是，此方法仅限于 iOS 9.0 和 Chrome for Android 或 Android 5.0 for WebViews。此外，它可能会破坏混合鼠标和触摸设备上的悬停效果。

JS 检测和 CSS 前置

强大的解决方案包括使用 JavaScript 检测触摸输入并前置所有：具有自定义主体类的悬停规则（例如 .hasHover）。通过有条件地应用此类，仅在支持鼠标的设备上启用悬停效果。

鼠标运动和触摸检测的组合方法

最全面的方法结合了鼠标运动检测和触摸检测。当检测到鼠标移动时启用悬停效果，并在识别到触摸输入时禁用悬停效果。这种方法在支持触摸和鼠标的设备上提供了无缝体验。

实际实现

实际实现涉及 JavaScript 事件侦听器和主体类操作。 hasHover 类根据触摸输入和鼠标移动事件动态添加或删除。

对于现代浏览器，可以在 https://jsfiddle.net/57tmy8j3/ 找到一个实例。与旧版浏览器兼容的旧版本可在 https://jsfiddle.net/dkz17jc5/19/ 上找到。

以上是如何消除触控设备上不需要的 :hover CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！