@media hover feature

The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.

This can be handy to differentiate things that have an 'actual' hover. Most mobile browsers apply :hover styling after interacting with an element, to support inaccessible things, like opening a menu on hover.

a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /* when hover is supported */
  a:hover {
    color: white;
    background: black;
  }
}

Note that phones often emulate hover with a long press, which can pass as 'supported', although inconvenient for the user.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover https://www.smashingmagazine.com/2022/03/guide-hover-pointer-media-queries/ https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover

[[css]]