如何有效禁用触摸设备上的 :hover 样式：综合指南

如何在触摸设备上禁用 :hover 样式：综合指南

问题：
当触摸设备访问网站时，：悬停 CSS 样式在点击或点击时触发。这可能会分散注意力，甚至导致交互元素无法访问。

目标：
在不知道每个声明选择器的情况下删除或忽略触摸设备的所有 :hover CSS 声明。

解决方案：

JavaScript 删除

使用 JavaScript 删除所有包含 :hover 的 CSS 规则。

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

优点：

• 与旧版浏览器兼容，不需要更改 CSS。
  缺点：
• 禁用混合鼠标和触摸设备上的悬停，损害用户体验。
• 只能删除同一域上托管的样式表。

仅 CSS 与媒体查询

使用 @media 块包含 :hover 规则。

<code class="css">@media (hover: hover) {
  a:hover { color: blue; }
}</code>

优点：

• 易于在 CSS 中实现。
  缺点：
• 需要支持悬停媒体查询（iOS 9.0、Android Chrome、Android 5.0）。
• 混合鼠标和触摸设备不一致。

触摸检测和 CSS 注入

检测触摸事件使用 JavaScript 并有条件地添加 CSS 类。

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

<code class="css">body.hasHover a:hover { color: blue; }</code>

优点：

• 比混合触摸设备的媒体查询更可靠。
  缺点：
• 仍然受到触摸模拟事件（例如触摸屏上的鼠标光标）的影响。

最终解决方案：动态悬停检测

基于鼠标光标和触摸事件启用或禁用悬停样式。

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

优点：

• 最强大的解决方案，适用于所有浏览器。
• 动态调整悬停样式以适应设备输入。
  缺点：
• 触摸事件后有短暂的延迟（例如 500 毫秒）以防止模拟鼠标移动事件。

以上是如何有效禁用触摸设备上的 :hover 样式：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！