How to Eliminate Sticky Hover Effects on Buttons for Touch-Enabled Devices?

How to Eliminate Sticky Hover Effects on Buttons for Touch-Enabled Devices

When creating carousels with permanent navigation buttons, a common issue arises on touch devices. The buttons' hover states, typically appearing blue, become "sticky," remaining activated even after tapping. Several approaches to address this problem have been explored:

• Adding a no-hover class on touchend can resolve the issue, but it might impact performance and introduce compatibility issues on devices like Chromebooks with both touch and mouse capabilities.
• Implementing a touch class to the documentElement and modifying CSS accordingly can also address the problem, but it's not optimal for devices with both touch and mouse support.

An ideal solution would be to remove the hover state upon touchend. However, no direct method is available for this. Focusing on another element does not remove the hover state. While tapping on another element manually does, triggering this action programmatically in JavaScript remains a challenge.

To solve this issue effectively, you can leverage recent developments in CSS Media Queries Level 4:

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

This CSS essentially states, "If the device supports true hovering (e.g., has a mouse-like primary input device), apply the button hover style."

For browsers where this feature is not yet implemented, a JavaScript polyfill can be utilized to detect hover support and toggle a custom class, allowing you to apply the hover style conditionally:

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

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

This solution effectively eliminates sticky hover effects for touch devices while maintaining desired aesthetics on devices with mouse input.

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