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

Hi @nmn,
I wanted to share some thoughts I had while testing on Desktop and Android.
Maybe this possible outcome could be subdivided:

> 2. A :hover that is only active while the touch interaction is active. This is likely the solution that most developers expect. In fact, iOS used to work like this in the past. However, the behavior was changed to the way it works today so that older websites that show menus and other interactive elements on :hover can be usable on touchscreens.

2. 1. `:hover` matches on the element where touchstart is fired first, and matches until touchend, even if the finger is not on the element anymore, it's the same behavior as `:active`.
   2. `:hover` matches while the finger is on the element. If the finger moves outside the element, `:hover` matches the new element. If the finger is released while on an element that has the "sticky" behavior, it sticks.
   Notes:
   - It would be similar to the mouse hover behavior.
   - Maybe there are some use cases for this, in combination with `touch-action: none`.
   - `:active:hover` would match for the element where touchstart is fired first, and if the finger is on the element, note that Chrome `:active` is a bit buggy.
   - This [Etch-A-Sketch](https://codepen.io/propjockey/pen/mdBvjgg) would work :).

## Proposals

1. 
`hover-behavior/hover-action: auto | hover;`
This would work on an active device basis, so for the mouse there would be no behavior changes.
`auto` would follow the current behavior.
`hover` would follow `2. ii.` behavior.

2. 
`hover-behavior/hover-action: auto | hover;`
This would follow `@media (hover: hover | none)` behavior but on an active device basis.
`auto` would follow the current behavior.
`hover` would stop `:hover` from matching.

3. 
`touch-hover: auto/sticky | hover | none;`
`auto` or `sticky` keyword would be the current behavior.
`none` stops `:hover` from matching.
`hover` is `2. ii.` behavior.
This way if a new input device is invented in the future, a `future-hover:` property can be added, without interfering.

---

There are other possibilities that crossed my mind, but that I did not expand on.
`hover-pointer-type: mouse | touch | pen | any;`
`hover-action: auto | hover | none;`
`hover-behavior: <pointer-type> <action>;`

`hover-pointer-type: mouse | touch | pen | any;`
`hover-pointer-precision: fine | coarse | any;`
`hover-capability: none | hover | any;` keywords same as `@media (hover: hover | none)`.
`hover-action: auto | hover | none;`
`hover-behavior: <pointer-type> <pointer-precision> <capability> <action>;`

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


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

Received on Wednesday, 13 August 2025 21:34:09 UTC