hover does work fine on machines that don’t have touchscreens. You get hover with a mouse or touchpad pointer, for example, here is me hovering over the share button:
But for the laptops that have touchscreen and mouse/touchpad.. I’m not sure there is a way to detect when the mouse is unplugged versus plugged in.
I don’t know if there’s any way to fix this through CSS4 media detection:
But it would be nice to be able to fix this for devices that show up as both touchscreen and mouse – to allow hover for them. Users have resorted to disabling the touchscreen on their laptop to get it to work, probably because they never use the touchscreen part anyway.
I tested this .. Edit fiddle - JSFiddle - Code Playground and got
- desktop
mouse - iphone
touch - surface pro mouse ← wrong!
I also tested Checking device hover capabilities with JavaScript using interaction media features - JSFiddle - Code Playground and same results – the touchscreen + mouse device looks identical to the desktop.