How to remove/ignore :hover css style on touch devices

web-development

responsive-design

css-media-queries

touch-events

byAlex Kataev·Jan 17, 2025

Use a media query like @media (hover: hover) to enforce hover styles strictly for devices that intuitively differentiate between hover and touch interactions. Here's how you proceed with it:

@media (hover: hover) {
    .element:hover {
        background-color: blue; /* Your hover effect, or our caterpillar turns into a butterfly. */
    }
}

Placing your .element's hover effect inside this block ensures touch devices won't entertain these styles, hereby giving users an experience ideal to what their device can offer.

Adopting media queries for touch and hover

Designing for a web population implies considering both mouse and touch interactions. With CSS, let's ensure a bespoke interactive environment for all users via media queries aimed towards specific input methods:

@media (hover: none) and (pointer: coarse) {
    .element:hover {
        /* It's a touch device, let's not annoy with hover styles. */
        background-color: inherit;
    }
}

This multimodal container helps to phase out the hover styles on touch devices by leveraging the pointer: coarse for broader touch interfaces and hover: none, a no hover zone. Combine this with the previous media query to manage hover states across devices like a tamer at a circus.

Inculcating mixed input environments

For the few elegant devices that support both touch and mouse interaction, let's use a mixed approach. By leveraging JavaScript to detect the first instance of a touch event, we can then add a class to override all the :hover styles:

document.addEventListener('touchstart', function() {
    document.body.classList.add('touch-device'); /* Ahoy! It's a touch device! */
});

Following that, your CSS could be updated to:

.touch-device .element:hover {
    /* No more surprise effects now */
    background-color: inherit;
}

This allows for hover styles to be alive and kicking until a touch action is detected, post which they are out of action for the rest of the Merry Go 'Round ride of touch devices.

Precision selectors and feature discovery

Harnessing advanced selectors and planning for feature discovery presents a more refined touch interaction and a future-proof armor for your CSS weaponry:

/* It's a bird! It's a plane! No, it's just enhanced feature detection */
@supports ((hover: hover) and (pointer: fine)) {
    .element:hover {
        background-color: blue; /* A touch of elegance for advanced devices */
    }
}

With Modernizr, the superhero that no device can hide from, provide a graceful fallback for those browsers still learning to cater to these media queries.

Champions league of interactions and compatibility

Crafting a responsive design also ensures an optimized interaction model for all devices. Here's the Champions League, where everyone gets a chance to play:

Media features, (pointer: coarse/fine), assists in tailoring designs responsively to the intrinsic capabilities of a device.
Testing your application across bacteria of browsers and species of devices to verify compatibility. Tools like Microscope-BrowserStack or the old-fashioned Petri-dish device testing can aid in this.
Refer extensively to reference books like the MDN Web Docs and "Can I Use" encyclopedia for the latest support canvases on CSS media features.
When using JavaScript to manage :hover states, cheer for the device interaction events carefully to toggle styles efficiently, similar to the right subs at the right time.
Remember the rookies of the team, older browsers may not be as compatible with some of the complicated CSS-only solutions. The solution is to line up a fallback or apply new tactics to ensure the interaction model is consistent.