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
✅ My full build of this card: • CSS Card with hover an...
✅ Go even deeper with this great article looking at hover, but also pointer, any-hover and any-pointer: www.smashingmagazine.com/2022...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@pureretro5979]

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.

[@lucasmarcinkiewicz2403]

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.

[@guestofallah7661]

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!

[@FvsJ101]

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

[@cgfit5182]

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

[@user-23dfgnbk]

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

[@bukkorossu]

Some new and cool stuff... once again. Gonna use it in my projects now. Thanks a lot!

[@LePhenixGD]

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

[@universecode1101]

I love pure css … Great Kevin 🤩✌🏻

[@crim-son]

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

[@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.

[@FuzailShaikh]

Thanks mate! Keep making such videos

[@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.

[@e11world]

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

[@prateek5019]

Always helpful and insightful. 🤘

[@CriminalClinton]

Earned a sub! Don’t let me down. Keep up the consumable content 👍

[@user-km9vl9ck9u]

awesome stuff again!! thanks!

[@clevermissfox]

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

[@joejoe04]

Super helpful and useful, thanks!

[@its.arjun.s]

I never even knew about hover media query. Thanks!

[@CuervoAmarillo]

Thanks a lot Kevin, you never disappoint!

[@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!

[@kostiantynkarzhanov9216]

Awesome! Kevin, thank you so much! 💛

[@ivanmitov4920]

Super usefull! Thanks!

[@rjtkoh]

thanks, very well explained

[@ibrahimdelice9422]

Wow this is amazing. Thank you!

[@luckylukeskywalker]

Exactly what i was looking up a few weeks ago:)

[@borisnieminen677]

thanks, excellent tutorial.

[@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)

[@nikilragav]

Are you suggesting something like use intersection observer to only show the details of the card in the middle of the screen or something like that?

[@Brunoenribeiro]

@@nikilragav yep

[@TobiSGD]

Thank you, this really solves some problems for me.

[@originalbinaryhustler3876]

Much appreciated ❤

[@sujoydutta920]

I already love CSS 🥰 nice to know this new trick

[@user-kj7bn8ls3b]

Many thanks for your video)

[@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.

[@profesor08]

perfect point

[@krazymeanie]

While thats true, for some its not aesthetically pleasing. You can still go the "bad design" route just with the indication that the object can be hovered, for example using arrow icons etc to indulge interaction. You just gotta make things clear enough so the user understand what the ui does and how to use it. Think of it as bad design done well.

[@FlameRat_YehLon]

@@krazymeanie Personally never loved hover-over design even in the early 2000s, before iPhone made surfing Internet web page with touch screen popular. It was always, hey you are 1 px off the hover zone so we have to get rid of the whole thing for you. That was the era when animated objects can only be done in Javascript (rather than the GPU-accelerated CSS) so hover is either overly sensitive or very unresponsive.

[@TesterAnimal1]

That’s overly prescriptive. You then just deny extra functionality to users who happen to use a mouse.

[@elissitdesign]

My whole website is hidden by a rollover. Guess I need a redesign.

[@LuisCarlosPando]

I love your content Kevin, keep it up! 🫶

[@zackaryhall8593]

Thank you for this!

[@Wynorrific1]

Youuuuuu areeeeee the greatest, I sayyyyyyty it again you’re the greatest. You shaped me into a great front end designer thank you sooooooooo much

[@benlow24]

Super helpful media query. I was wondering how to do this when building/designing SaaS apps.

[@sanmeetsingh4]

Super Awesome stuff 👍

[@TheBorninmotion]

wow its very useful thank you Kevin !

[@segovia102]

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!

[@ed1nh0]

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!

[@conradgroenewald4605]

That is a very useful tip thanks.

[@Drivingralle]

Such a great CSS feature

[@jhoannyosuna6483]

you're the best! thank you

[@excelemma5960]

Kelvin🤲🏾❤️ always happy once i see your videos

[@jorgecortez7448]

My God, this is bonkers thanks for sharing!

[@mrjebbar]

You the man bro, you're too epic at styling

[@rrd_webmania]

Yes, yes! A mobile CSS video. Thanks

[@x-Mick-x]

KP you are my go to for css videos and I'm wondering how an elements title attribute works on a touch screen, or how you could make them work.

[@uthsarakawmini9793]

its really heapfull. thanks

[@terryg4415]

Awesome!

[@lesalmin]

Thanks!

[@Anth-ony]

I just add 'ontouchstart' inside my opening body field ex: as a means to deal with this. This way, if a user touches anywhere on the screen where a hover effect may occur, it still happens. Same as if they're over a section and start to scroll with their finger, it'll fire off the hover effect. I find that this is how I personally would use a site so it works for me.

[@wahabkazmi7486]

Just did it in very bad approach using is in my last project! I wish I knew it earlier

[@kbzcomuy]

muy bueno, gracias

[@bigjenny7954]

excellent!

[@ajzack983]

Is there a way to use the same in-card animations maybe when the user touches the card while scrolling ? I THOUGHT THAT WOULD BE THE ALTERNATIVE FOR A HOVER

[@beinyourguard]

amazing!

[@franktielemans6624]

I learned something today.

[@waseksamin3216]

This is soo cool

[@dbweb.creative]

is there a way in css to do long touch press to then for example show title?..

[@MJ_the_Gamer]

Do a css series course videos

[@Yenlui76]

Cursor media query seems nice to condition the size of buttons

[@vinayc.annangi]

Also for hover on mobile dragging from left to right or vice versa should work.

[@sherwancaris5199]

This is why we call you: The King 👑 of CSS!

[@undochlorine]

thank u

[@hernanlara4659]

It is a good solution, although it would be highly interactive to get people to access the detail of the information by tapping, and go to the URL with the second tap

[@blazi_0]

He just knows what I'm searching for this guy is a wizard

[@udageethdias]

hey kevin can you pls make a video of css animation.transition,transform,translate css properties cause i dont i have any knowledge about all that at all.This will very helpful.

[@yevgenylevin8381]

Very nice Kevin 😉

[@khodok2061]

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 😂

[@_g4m3r_]

So the most effective approach is to start with mobile dimensions and no hover effects, then scale it up to full size adding the fancy stuff we want in "@media hover: hover". Correct?

[@chrisbailey1173]

I've been using pointer fine in my media queries for my hover effects. Would you recommend using hover hover instead?

[@misssincere5762]

I wondered about this.

[@SaleKnezevic]

Wish I could have remember at least 20% of what I have seen in your videos...and even now it is awesome. Well done sir, like always.

[@oliver139]

New knowledge!

[@FilippoDanieleLegname]

Grazie.

[@wahidislamlinad]

You're awesome 🥰

[@SolomonMathai]

can u tell me how to add auto hover in media max width 576px . the hover i added is only working when i tap the item . i need my hover when it is at the centre of the mobile screen

[@ropoxdev]

We love you Kevin ❤️❤️❤️

[@LuisReyes-zs4uk]

Bravo 👏

[@raoufbakhti7786]

hi i have small problem when id did what you said it works for chome mobile (chrom mobile toch mode )but it didnt on my android phone use kast version of chrome do you have help ?

[@ShehabElDabaa]

greeeeeeeeeeeeat, you made my day

[@stansimi7500]

Does anyone have this kind example card with responsive mansory design or similar? thx

[@kalebakeitshokile1366]

god I love this dude

[@islamibrahim8121]

Noticed that Kevin's wearing a dftba t-shirt! I'm a nerdfighter too!!

[@carlom43]

Great video! I have a project and I need to fill a hover object with data from a table. I want a user to hover over a name of a company and the website outputs data from a table, as that data is subject to updates Can I do this with CSS or do I need to know Java too. Where do I start

[@siddiqahmed3274]

Go with JavaScript

[@max_samusevich]

media hover and any-hover don't work in my Firefox 102. Does anyone have the same issue? Caniuse and MDN say it is supported by Firefox

[@dansnel]

It can be done responsive if some custom properties are set from js when (and after) the DOM is loaded. So, title may be multiple line text, as you know. I think it's time for you to introduce and use web components. Only way for complete solutions. Sync of web comp is last part of definitely frameworks removing. Let's say Lit is a compromise, maybe angular for webapp, maybe electron for native desktop app. But client side should become independent 100%.

[@desitoonswala]

Kevin can make fully functional website with css without using html and java 😂😂

[@donmorris4506]

Kevin, you da man

[@niteshbabu5731]

So instead of using screen sizes, can we just use these media queries to check if were on mobile?

[@DTunezOfficial]

Hover: hover doesnt work if your browser supports long press to hover. It does work in the inspector but on a real device it ignores it (I have a OnePlus 8 Pro with Chrome and it still uses the hover:hover query). Pointer: coarse is better because this does work

[@kasetophono]

My mind is genuinely blown

[@herion05]

Just a heads up that this media query doesnt work on most samsung devices. Weirdly enough they trigger the hover: hover query but not the hover: none. Until thats fixed I cant find this media query useful.

[@osawereao]

Okay, I can honestly say I respect @Kelvin so much that it is love. He is just an awesome human being from my perspective

[@xbxb]

I thought the solution is when it scroll to that card the info will show with animations.

[@leonard_9500]

I fondly remember how you could hover on the Samsung Galaxy S4.