如何防止触摸屏设备上出现不需要的 :hover 效果？

克服触摸屏设备上的 :hover 怪癖

问题： :hover CSS 样式在触摸设备上无意触发，导致不良效果。

解决方案：实施全面的策略来禁用或忽略触摸屏平台上的 :hover 声明。

快速而肮脏：JavaScript 删除

对于务实的方法， JavaScript 可用于删除所有 :hover 样式。请注意，样式表必须托管在同一域上，这可能会妨碍混合触摸/鼠标设备上的用户体验。

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

基于 CSS 的解决方案

媒体查询：

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

但是，此解决方案仅适用于 iOS 9.0 或 Android 5.0 设备。

条件规则：

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

这需要前置所有 :hover 规则都具有基于触摸屏检测添加或删除的类（例如 hasHover）。

最佳检测：JavaScript 和 CSS

最强大的解决方案将 JavaScript 触摸检测与 CSS 相结合条件规则。

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

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

此方法在检测到鼠标时启用悬停效果，并在触摸时禁用它们。

实现建议

对于现代浏览器，建议使用类组合 JavaScript 和 CSS 条件规则。对于旧版浏览器，基于 JavaScript 删除 :hover 样式是一个可行的选择。

其他资源：

• [GitHub 示例](https:// jsfiddle.net/57tmy8j3/)

以上是如何防止触摸屏设备上出现不需要的 :hover 效果？的详细内容。更多信息请关注PHP中文网其他相关文章！