I currently have @media (any-hover: hover) condition in my css, and previously with (hover: hover), but neither do what I want: I would like to only enable hover event if a mobile device have some kind of hover mechanism (eg. trackpad, mouse but not limited) implanted.
However, with hover:hover at least on iPad it doesn't stimulate the hover event at all (I know hover detects if the device's primary interaction supports hover), not even I have magic keyboard connected (which has a trackpad). Then I change to any-hover and this time the iPad stimulates hover even without any accessory connected, and is interact with touch.
Hence, is there's a way to detect if a device has hover-able device connected? Should I use pointer: fine or pointer: coarse to do this? Or is there a way to do so in JS? I don't want it simply detect if there's a mouse connected, but any kind of device with hover-like mechanism.
So you want something that does not match for normal iPads and does match if someone plugs a mouse into an iPad?
pointer: fine is usually enough, but you can get even more precise with (any-hover: hover) and (pointer: fine). You really only want to enable hover content for devices that have fine-grained pointer control.
You can express this in JS as well:
let mql = window.matchMedia('(any-hover: hover) and (pointer: fine');
Then I change to any-hover and this time the iPad stimulates hover even without any accessory connected, and is interact with touch.
That seems like a bug.