Disabling CSS Hover Appearance on Mobile

We all know that hover events don’t really work on touch screens because there’s no cursor.

When you touch a button with hover appearance or animation, your phone will emulate the hover behaviour, and does nothing. It’s when you touch the second time, only the button will do what it should do.

This may slow down interactions and confuse the users, which is not what we want.

Hover Media Query Comes to Rescue!

Before I discovered the hover media query, I used to set the hover appearance to only appear on certain screen size, which is not very helpful since some touch screens may be as large as a laptop screen.

What we could actually do, is to detect whether the device really supports ‘hover’ event:

@media (hover: hover) {
  a.button:hover {
    color: white;
    background: black;
  }
}

This way, there will be no more hover appearance when your website is browsed on a mobile phone.

In SCSS, you could even nest the media query like this:

a.button {
  appearance: none;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #000;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  color: #000;
  background: #fff;

  @media (hover: hover) {
    color: #fff;
    background: #000;
  }
}

Easy, isn’t it?