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

Hover state question in iPhone!

I've noticed that the :hover states don't work at all on the iPhone, but it works for all other smart devices — which is very odd. If I have a :hover state with selected grand children to also have some alternations when an element is being hovered, what should I do about that when it comes to the iPhone? Any ideas?

Any pure CSS solutions without having to resort to JQ/JS?

Thanks so much, here is my site: Nin-yo.com

I'm not sure what you mean. I'm confused because since, you don't have a mouse on a phone, how would users use the hover state?

I know where this is going and I know you're not confused. It's not like i'm going to hover my finger over an element like a magic trick. But thanks for the quick reply

Sorry if that sounded like a sarcastic comment but it honestly wasn't. I was just trying to get a better understanding of what you're trying to accomplish. I can that on a desktop, when you hover over an element, an overlay slides up, and when you click on it the button that slides up, you're taken to a post.

What behavior are you trying to accomplish on the iPhone? Would you like to go straight to the post after tapping on the image, or would you like the transition to happen after a tap the same way it would on a desktop hover? (I think the latter is weird UX and would recommend it)

Thanks Nick Ocampo, I was hoping that the "hover" (on the iPhone) behaves the same way as it does on the desktop, except instead of hovering over it, you click on it and the navigation container slides down (reference: nin-yo.com). There was another post on here that recommended me trying out :focus. I haven’t had a chance to try that yet, but would that work on the iPhone? Thanks again for the reply

Honestly I would not recommend implementing that behavior. From a UX perspective, I think it would be unnecessary and unexpected to the user to overlay the image on a tap and then have to tap on it again to view the post. I would recommend just having the overlay and button show by default on mobile devices, but that's just my opinion.

Sorry but I honestly think we're not on the same page (literally also — ha!). I'm referring to a navigational container element that slides down when activated. I'm not referring to a clickable image to view a post.

LOL! Yeah I was totally looking at the wrong thing. I'll see my self out of this post haha. Sorry man!

1 Answer

Have you tried :focus in addition to :hover?

Thanks! I haven't tried it yet, but does the :focus property modifications of a targeted element activate from a click/touch? if so, then awesome i'll definitely try it