@media (hover: hover)
Hover that stays off touchscreens
CaveatThe query tests the primary pointer only. A laptop with a touchscreen usually matches, since the trackpad counts as primary, and a finger tapping that same screen still latches :hover until the next tap. any-hover matches when any connected pointer can hover, which is usually too broad for styling. Test the primary pointer and accept that hybrid machines get the mouse version.
FallbackEvery current engine supports the query, so the fallback is whatever you leave outside it. Anything a person has to find, such as a delete button or a submenu, stays visible by default, and the hover rule only adds a lift on top. Give :focus-visible the same cue so keyboard users see it too.
/* only when the main pointer can hover */
@media (hover: hover) and (pointer: fine) {
.tile:hover { translate: 0 -3px; }
}
/* keyboards get it everywhere */
.tile:focus-visible { translate: 0 -3px; }Published