How Can You Prevent Unwanted :hover Effects on Touchscreen Devices?

Overcoming :hover Quirks on Touchscreen Devices

Problem: :hover CSS styles are unintentionally triggered on touch devices, causing undesired effects.

Solution: Implement a comprehensive strategy to disable or ignore :hover declarations on touchscreen platforms.

Quick and Dirty: JavaScript Removal

For a pragmatic approach, JavaScript can be utilized to remove all :hover styles. Note that stylesheets must be hosted on the same domain and it may hinder UX on mixed touch/mouse devices.

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

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

CSS-Based Solutions

Media Queries:

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

However, this solution only works on iOS 9.0 or Android 5.0 devices.

Conditional Rules:

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

This requires prepending all :hover rules with a class (e.g., hasHover) that is added or removed based on touchscreen detection.

Optimal Detection: JavaScript and CSS

The most robust solution combines JavaScript touch detection with CSS conditional rules.

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

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

This method enables hover effects when a mouse is detected and disables them when touched.

Implementation Recommendations

For modern browsers, a combination of JavaScript and CSS conditional rules using classes is recommended. For legacy browsers, JavaScript-based removal of :hover styles is a viable option.

Additional Resources:

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

The above is the detailed content of How Can You Prevent Unwanted :hover Effects on Touchscreen Devices?. For more information, please follow other related articles on the PHP Chinese website!