DEV Community

mario menti
mario menti

Posted on

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

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 cause to work on some CSS for a web-based chatbot component. It had to work both on desktop and mobile browsers, and while the majority was quite straightforward, I came across some interesting behaviour by mobile browsers around the "hover" selector on buttons.

In short: mobile browsers seem to apply "hover" style to buttons that have focus.

This kind of confused me - the majority of mobile browsers (both on Android and iOS) applied the "hover" style to the button that had focus. This wasn't really what I was after, so I thought I'd wrap the hover style in a media query, to stop browsers than can't really hover (i.e. mobile browsers) from using it:

@media (hover: hover) {
Enter fullscreen mode Exit fullscreen mode

However, this did not work, as it appears most mobile browsers consider themselves to be able to hover (via a long press). Damn. Ok, let's try the opposite:

@media not all and (hover: none) {
Enter fullscreen mode Exit fullscreen mode

Still no luck, for the same reason as above I'd guess.

So the next thing I was looking at was the "pointer" media query, and hey presto, using "pointer: fine" appeared to work much better, as mobile browsers clearly don't consider themselves to have a fine pointer. There's only one problem with this: Firefox doesn't support it (yet?). To work around this, I added "-moz-touch-enabled: 0", so I ended up with this media query:

@media (-moz-touch-enabled: 0), (pointer: fine) {
Enter fullscreen mode Exit fullscreen mode

This finally worked great, with one exception: the "hover" effect now doesn't kick in on Firefox on a laptop with a touch screen. I think I (or rather the client) can live with that, as at least it means the buttons now render as expected in all mobile browsers, and in all desktop browsers except the "Firefox + touch screen" combo.

Sharing this in the hope it may help someone down the line, but equally - I am no CSS expert by any stretch, and as I said, the "solution" isn't really a perfect solution in any case - if anyone reads this and shakes their head at my incompetence, please let me know any better solutions in the comments!

Top comments (13)

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.