How Can I Eliminate Unwanted :hover CSS on Touch-Enabled Devices?

Eliminating :hover CSS on Touch-Enabled Devices

When users access websites through touch devices, :hover CSS declarations can become undesirable, as they do not respond effectively to touch input. Users may experience lingering hover effects that can be disruptive. To address this issue, several methods are available to remove or ignore :hover styles on touch devices.

JavaScript Removal

One approach involves employing JavaScript to eliminate all CSS rules containing :hover. This method is compatible with older browsers and does not require CSS modifications. By checking if the device supports touch input and iterating through the style rules, JavaScript can remove all :hover declarations.

CSS-Only Media Queries

Another option utilizes @media queries to restrict the application of :hover rules only when the device supports hover. However, this method is limited to iOS 9.0 and Chrome for Android or Android 5.0 for WebViews. Additionally, it may break hover effects on mixed mouse and touch devices.

JS Detection and CSS Prepending

A robust solution involves detecting touch input using JavaScript and prepending all :hover rules with a custom body class (e.g., .hasHover). By conditionally applying this class, hover effects are enabled only on devices with mouse support.

Combined Approach of Mouse Motion and Touch Detection

The most comprehensive method combines mouse motion detection and touch detection. Hover effects are enabled when mouse movement is detected and disabled when touch input is recognized. This approach provides a seamless experience on both touch and mouse-enabled devices.

Practical Implementation

A practical implementation involves JavaScript event listeners and body class manipulation. The hasHover class is dynamically added or removed based on touch input and mouse movement events.

For modern browsers, a live example can be found at https://jsfiddle.net/57tmy8j3/. A legacy version compatible with older browsers is available at https://jsfiddle.net/dkz17jc5/19/.

The above is the detailed content of How Can I Eliminate Unwanted :hover CSS on Touch-Enabled Devices?. For more information, please follow other related articles on the PHP Chinese website!