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

General Discussion

Posted by Unsubscribed User
Unsubscribed User
4,479 Points

Coding / developing for touch screens

I am okay in HTML and CSS. I'm working my way through the entry level courses here and have just started Javascript.

Can anyone give me some guidance on how I would develop for touch screens?

I have CSS rollovers or 'hover' events on my website but they don't work for touch screens and I'd like to know how could make them work.

Thanks.

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Touch screens don't really have a :hover state at all. And although I've never really tried to do any CSS specifically for touch screens, I've read that using :focus can work well in some cases. Maybe that might be worth trying out?

Unsubscribed User
Unsubscribed User
4,479 Points
Unsubscribed User
Unsubscribed User
4,479 Points

Thanks Jennifer.

I thought there might be some Javascript tools I could use?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Maybe someone else here will have another opinion, but this (as I understand it) is a hardware imposed limitation. Either that, or I'm completely misunderstanding what you want (which is possible). :hover determines when your mouse-pointer is hovering over an item. On a touch screen, your finger IS the mouse pointer and at least as of right now there's no technology I'm aware of that can detect when your finger is within a certain range of the touch screen. The touch screen has to receive the electrical charge directly from your finger to react. Which is why you can't press things on a touch screen with any old stick. It has to be something with the electrical charge the capacitive screen is expecting.

Unsubscribed User
Unsubscribed User
4,479 Points
Unsubscribed User
Unsubscribed User
4,479 Points

Thanks Jennifer, I'll have a look into :focus