Dealing with hover on mobile

We can't hover on mobile devices, so what can we do about hover animations and other things that we might need to have on laptops and desktops? Well, we have a media query for that!

🔗 Links


⌚ Timestamps
00:00 - Introduction
00:56 - What we're starting with
01:31 - Hover media query basics
03:08 - Testing for hover or touch devices with dev tools
05:27 - How I approach writing these media queries
06:11 - pointer media queries

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[pureretro]

This is good to know. I've used JavaScript in the past to add a class to the body for touch devices which then activate CSS styles for those users. This is a lot cleaner and appears to have good browser coverage too.

[Thebiggestgordon]

Kevin you actually read my mind. I'm currently working on a therapy Web app that needs to be mobile responsive, and I was wondering the best way to replace hover animations if the user has a touchscreen. I literally couldn't do anything without this channel.

[FlameRat_YehLon]

But anyway, personally I'd say using hover to display any useful information should be considered bad design. It's easy to trigger (or disengage) by accident and also doesn't always available. Just show the information or always ask for a click/touch to trigger. The only valid use should really be just to indicate you are pointing at a clickable element and nothing more.

[Victor_Marius]

Another solution for touch devices and hover is to make it clear that there's some hidden content by adding an after element with an arrow (or arrows) symbol hinting it is an accordion.

[clevermissfox]

This is very very neat. Never realized there is a media query for touch devices

[LePhenixGD]

Amazing video Kevin!

I really believe you should make a video about all the different types of media queries

[its.arjun.s]

I never even knew about hover media query. Thanks!

[Brunoenribeiro]

Just food for thought:

Maybe intersectionObserver can give us a somewhat replacement for hover on small screens?

On larger screens, you can see more elements at the same time, so hover is good to indicate where the user's attention is

On smaller screens, the user usually sees just one element: the present one.

So maybe we can do "hover" animations when the element appears on the screen

What do you guys think?

(disclaimer: it's a little off-topic. I know that devices with large screens can also have touch screens that doesn't support hover)

[lucasmarcinkiewicz]

Kev, a very nice & easy way to solve problems with hover state. It def helps poeple to achieve a prompt resolution I agree, but sometimes what I'm also doing for a fancy effect is wrapping everything within an instance of intersection observer. When I'm scrolling the page then triggering a focus state for visible and centered elements (chosen selectors not everyone). This keeps all my animations working nice and effective.

[dfgnbk]

That was exactly what I was looking for! Thank you for the video!

[guestofallah]

I really was wondering how this can be done, I thought media query would be enough but since u mentioned touch desktop this makes more sense,
Thank u Kevin!

[ednh]

Great! This should be included in our CSS-best-practices-guide and it head us to progressive enhancement or gracefull degradation. Either way it's a semantic behavior that we all want for our projects. Thank you Kevin!

[crim-son]

This is just so mind blowing, learning new and very important things on this channel

[eworld]

Did not even know about this. Thank you Kevin. Awesome as always!

[gomitchell]

Thanks Kevin for this incredibly important and helpful lesson. I found that on my Mac Command + Alt/Option + M toggled the mobile view on Firefox.

[cgfit]

❤ i like this implementation. You nailed it! I will use this for my future request or projects. This channel is on 🔥.

[segovia]

Tried this with React using styled components. Using hover:hover and hover:none appeared to work fine in Chrome on a PC with developer tools. However, when I viewed the app on my A71 phone, it was not behaving correctly. I had to use pointer:fine and pointer: coarse and this worked perfectly. Cheers!

[FvsJ]

Thank you Mr Powell 🙏 currently working on a project and I needed this!!! Legend.. 😎

[khodok]

So I'm still a student, but I've made a few websites and I am one of those people who actually love the language...
A few months ago I moved from Firefox to Vivaldi (Chromium)

And this video taught me that media queries could do more than just affect screens and sizes... so that's cool.
but it also taught me where to find the touch no touch thing on Chrome... and that, I had given up on searching

So thanks Kevin 😂

[itsPenguinBoy]

Great solution... I thought I had a catch-all fix where the elements were display:none until their parent had focus-within. I enjoyed the experience on a touch device of tapping once to reveal and once to click... But that sucks because display:none removes it for screen readers too... I didn't think I could use visibility:hidden or opacity:0 because they're clickable but maybe a transform on the hidden element is the way to go.

Of course if my hacks fail I will resort to your more appropriate advice!