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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
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..
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.
@media only screen and (min-width: 801px)?
Then what about high-resolution touch devices? like an iPad may be?
Interesting, I hadn't thought of that, thanks!
Thank you. I too have no idea what I'm doing.
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.
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!
Drums and CSS go together well, eh?
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?
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.