Re: [csswg-drafts] [selectors] Proposal for a :hover-only pseudo class (#7544)

This is very much needed!

> The hover/any-hover media queries appear to be a workaround to this. Wrap your :hover selectors in those, and they won't apply on touch devices. However, this does not work correctly on devices with both pointer and touch support, e.g. modern iPads, Windows laptops with touch screens, etc. The media query doesn't update based on the input device the user is currently using, only based on what devices are available. Therefore, sometimes the hover effect either doesn't apply when it should, or applies when it shouldn't depending on the current input device.

Another reason why the `hover` / `any-hover` media queries are insufficient for this is that it is pretty common to apply the same styles for `:hover` and `:focus-visible` states, which can be done with `:is(:hover, :focus-visible)`. However, if one wants to do that while preventing the annoying "hover on tap" behavior on mobile, they're forced to duplicate those styles, because the `:hover` rule should now go in a media query while the `:focus-visible` one should not. With `:hover-only`, it is much cleaner and more elegant: `:is(:hover-only, :focus-visible)`.

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7544#issuecomment-1796991286 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 6 November 2023 22:53:50 UTC