How to Effectively Disable :hover Styles on Touch Devices: A Comprehensive Guide

How to Disable :hover Styles on Touch Devices: A Comprehensive Guide

Problem:
When touch devices visit websites, the :hover CSS style triggers on clicks or taps. This can be distracting or even render interactive elements inaccessible.

Objective:
Remove or ignore all :hover CSS declarations for touch devices without knowing each declaration's selector.

Solutions:

JavaScript Removal

Remove all CSS rules containing :hover using JavaScript.

<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>

Pros:

• Compatible with older browsers and does not require CSS changes.
  Cons:
• Disables hovers on mixed mouse and touch devices, harming UX.
• Can only remove stylesheets hosted on the same domain.

CSS-only with Media Queries

Use @media blocks to contain :hover rules.

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

Pros:

• Easy to implement in CSS.
  Cons:
• Requires support for hover media queries (iOS 9.0 , Chrome for Android, Android 5.0 ).
• Inconsistent for mixed mouse and touch devices.

Touch Detection and CSS Injection

Detect touch events using JavaScript and conditionally add a CSS class.

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

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

Pros:

• More reliable than media queries for mixed touch devices.
  Cons:
• Still affected by touch emulation events (e.g., mouse cursor on touchscreens).

Ultimate Solution: Dynamic Hover Detection

Enable or disable hover styles based on mouse cursor and touch events.

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

Pros:

• Most robust solution, works on all browsers.
• Adapts hover styles to device input dynamically.
  Cons:
• Has a short delay after touch events (e.g., 500ms) to prevent emulated mousemove events.

The above is the detailed content of How to Effectively Disable :hover Styles on Touch Devices: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!