My profile picture. My mom says I'm a handsome boy!
← All Posts

CSS Hover Media Queries

#Code, #Web

Recently I've been working on a project to fix "stuck hover-state" bugs on mobile devices. You frequently see these bugs when you click a button on mobile web, and the active state persists after event completion.

It doesn't appear to be well-known yet, but with CSS media queries you can scope your styles to only apply to devices that support the hover state:

@media (hover: hover) {
a:hover {
border-bottom: 1px solid var(--theme);

Browser support is great! There are a bunch of other options for things like detecting stylus devices, but personally I've only used the hover state detection.