Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Transitions and Transforms Transition Timing Functions and Delays Combine Transition Properties with the transition Shorthand

lesak
lesak
6,260 Points
Posted by lesak
lesak
6,260 Points

Hover effect on mobile

Hi. I've read that the hover effect doesn't work on mobile devices (e.g. ios). What would you recommend doing on mobile so that the overlay information gets displayed on mobile devices? Would using a click function for mobile only be a good solution?

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

I think there is no hover state in mobile, and if i am correct. People use jQuery's swipe function and give it the timing and etc. I think.

4 Answers

jay morelli
jay morelli
10,974 Points
jay morelli
jay morelli
10,974 Points

I am a bit late but I think a good solution would design the website in mobile first approach the way you wanted to look in the phone and then with media query you can add the effect for large devices. Hope you can find this helpful!

KEEP ON HACKING

claudius mainja
claudius mainja
9,661 Points
claudius mainja
claudius mainja
9,661 Points

there is no hover state for mobile devices especially touch screen pad phones .. because most mobile phones do not use a curse that can hover on the site . but i think you can try to use jQuery

lesak
lesak
6,260 Points
lesak
lesak
6,260 Points

Thanks Ammar and Claudius for writing back. Given my skill level, it looks more complicated than I'd like. I found this article http://callmenick.com/post/touch-events-instead-of-click-or-hover-with-javascript which I might add to my list of things to try out (it's a long list). For now, I'll try and think of alternative ways to display the information given on hover in desktop for mobile.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

That's a really interesting (and valid!) question.

Well, as you may know, a relatively short time ago Apple released the 3DTouch technology, but not only that, now others like Microsoft are also working on it swiftly and intently.

Seems no longer will be a problem very soon after all... :)