DEV Community

Lots of fun with "hover" css selectors on mobile devices

mario menti on September 01, 2018

Welcome to Mario's "I have no idea what I'm doing" dev.to posts :) I am by no means a designer or in-depth CSS expert, but have recently had cau...
Collapse
 
nburn42 profile image
Nathan Burnham

You can plug a mouse into an Android device. (Or use Bluetooth.)

And it gives you a normal cursor. So you can hover on mobile.

Collapse
 
benpai profile image
Benji Grant

The way I usually handle this is to design in a way that the hover style is usually the same as the focus, or is a lesser version of the focus style (think hover: 3px bigger, focus: 6px bigger). The best way to think of the cursor on mobile is that it follows where you touch, so if you last touched a button, the hover state will still be applied to that button until you touch somewhere else.

Collapse
 
mario profile image
mario menti

Thanks - yes, this makes sense, also in terms of how to design, although in this case I wasn't in charge of design, just implementing it..

Collapse
 
benpai profile image
Benji Grant

Haha yeah that's usually how it goes. Don't forget you can always let your client know that a small change in design can mean a lot for usability.

Collapse
 
nicolew profile image
Nicole W

@media only screen and (min-width: 801px)?

Collapse
 
imranfakhrul profile image
Imran Fakhrul

Then what about high-resolution touch devices? like an iPad may be?

Collapse
 
mario profile image
mario menti

Interesting, I hadn't thought of that, thanks!

Collapse
 
ben profile image
Ben Halpern

Thank you. I too have no idea what I'm doing.

Collapse
 
mt3o profile image
mt3o

I guess you should play with pointer-events on this. Also, there used to be a trick with onfocus="blur()" but i think it would affect keyboard navigation.

Collapse
 
mario profile image
mario menti • Edited

Re. onfocus, I tried to keep it simple by sticking to CSS only, with no Javascript - but will definitely look at pointer-events, I hadn't come across those before. Thanks!

Collapse
 
billraydrums profile image
BillRayDrums

Drums and CSS go together well, eh?

Collapse
 
mt3o profile image
mt3o

Regarding Firefox on mobile, I think you should handle it somehow, at least to make it usable. That media query you used, can you use opposite one, just for ff?

Collapse
 
mario profile image
mario menti

Firefox on mobile is just fine, the issue is that with the current media query, the "hover" style won't be applied on Firefox if the device has a touch screen (e.g. a laptop with a touchscreen running Firefox) even though it has a fine pointer.