The latest articles on DEV Community by mario menti (@mario). https://dev.to/mario https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F88960%2F9beb1e8c-4816-41df-a601-4177471f96c4.jpg https://dev.to/mario en mario menti Sat, 01 Sep 2018 12:45:16 +0000 https://dev.to/mario/lots-of-fun-with-hover-css-selectors-on-mobile-devices-3kh6 https://dev.to/mario/lots-of-fun-with-hover-css-selectors-on-mobile-devices-3kh6 <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Few7rg1vzhu873uh93mis.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Few7rg1vzhu873uh93mis.png" width="800" height="251"></a></p> <p>Welcome to Mario's "I have no idea what I'm doing" dev.to posts :)</p> <p>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.</p> <p><strong><em>In short: mobile browsers seem to apply "hover" style to buttons that have focus.</em></strong></p> <p>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:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>@media (hover: hover) { </code></pre> </div> <p>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:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>@media not all and (hover: none) { </code></pre> </div> <p>Still no luck, for the same reason as above I'd guess.</p> <p>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:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>@media (-moz-touch-enabled: 0), (pointer: fine) { </code></pre> </div> <p>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.</p> <p>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!</p> css mobile