No Touchy Hover!

Have a cool hover effect but find it annoying when the style activates on touch screen press? You could use an arbitrary min-width query but that's not guaranteed to cover all cases. Introducing the lesser known hover media query as a dedicated place for hover styles. They'll only activate where hover support is detected - how cool!

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: white;
    background: rebeccapurple;
  }
}