如何在触摸设备上有效禁用 :hover CSS 样式？

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

开发网站时，最好删除或忽略触摸设备上的 :hover CSS 声明，因为这些声明可能很尴尬且不必要。

快速而肮脏：使用 JavaScript

一种方法是使用 JavaScript 删除所有包含 :hover 的样式规则。此方法与旧版浏览器兼容，并且不需要修改 CSS。

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

限制：

• 样式表必须托管在同一域上。
• 混合鼠标和触摸设备仍然可以触发 :hover 事件，对用户体验产生负面影响。

仅 CSS：媒体查询

或者，您可以使用媒体查询禁用某些设备的 :hover 样式。

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

限制：

• 需要媒体查询，但不需要所有浏览器都支持。
• 不适用于混合鼠标和触摸设备。

最强大的：JavaScript 检测

对于最可靠的解决方案，使用 JavaScript 检测触摸事件并在 :hover 规则前加上自定义类。

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

此方法克服了纯 CSS 方法的限制，但在混合鼠标和触摸设备。

要解决此问题，请实施更复杂的方法，根据鼠标光标移动启用悬停效果，并在触摸事件上禁用它们。

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

此解决方案提供可靠的检测和处理所有设备上的悬停样式，而不影响用户体验。

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