Ben Borgers

How to disable CSS hover styles on phones

March 18, 2020

CSS styles for hovering (like a:hover) can be janky and annoying on touch screen devices that don’t support hovering.

You can easily fix this by wrapping your hover styles with a CSS media query that detects whether the current device has a cursor that can hover.

@media (hover: hover) {
  a:hover {
    /* hover styles */

Now, the styles inside that @media block will only be applied if the device supports hover.

The opposite of this is also possible - applying styles only to devices that do not support hovering.

@media (hover: none) {
  /* styles for touchscreen devices */

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.