How Can We Eliminate Sticky Hover Effects on Buttons for Touch Devices?

Preventing Sticky Hover Effects for Buttons on Touch Devices

The persistent hover state on buttons in touch devices can be a nuisance. To address this, various solutions have been proposed, but none seem fully satisfactory. One approach involves adding a "no-hover" class on touch end, but this negatively impacts performance and doesn't account for hybrid devices. Another option is to add a "touch" class to the document, but this too fails on devices with both touch and mouse capabilities.

The Ideal Solution: CSS Media Queries Level 4

With the advent of CSS Media Queries Level 4, a more refined solution has emerged:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

This media query specifically targets browsers with true/non-emulated hover support (e.g., devices with mouse-like input mechanisms). Buttons in such browsers will display the blue hover effect.

Polyfill for Legacy Browsers

For browsers without this feature, there's a JavaScript polyfill that can simulate true hover support:

html.my-true-hover button:hover {
    background-color: blue;
}

The polyfill detects hovering capabilities and toggles the "my-true-hover" class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

This combination of CSS and JavaScript ensures that hover effects work flawlessly on both modern and legacy touch devices.

The above is the detailed content of How Can We Eliminate Sticky Hover Effects on Buttons for Touch Devices?. For more information, please follow other related articles on the PHP Chinese website!