HorusKol

Bytes:

Are hover effects sticking when you touch buttons?

February 11, 2022

There's a media selector that can help.

If you want a hover effect like this, but you don't like that the background changes after it's been touched on a phone or tablet

button:hover {
  background-color: #cceeff;
}

@media (hover: hover) is a way to detect devices that really do support hover:

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

A plugin for PostCSS to help prevent sticky hover on touch screen