CSS :hover behaviour on touchscreen devices

Question

I am developing a CSS framework that relies on being simple, minimal and pure CSS as much as possible. What I want is to to make certain things like dropdow

Answer 1

This is nearly a duplicate of a bunch of questions out there, but I want to address your main points:

1. By "a hover based dropdown" you mean one that will appear as long as the user has their finger on it? As a mobile user, I can't picture this being a successful UX

2. All pseudo-classes are here https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes The ones I would consider "interactive" are :active, :checked, :focus, :hover. The trouble with :hover is, as you say, it isn't well supported and, again, it doesn't really fit the way users interact with mobile sites. The trouble with :checked is it relies on checkboxes, which puts pretty severe restrictions on the supported markup.

3. Definitely mobile Safari doesn't support it, which means it's a big enough problem to matter.

The most common solution is to use javascript touchevents, but if you're going all-CSS that isn't going to work for you.

You may find something useful here Hover effects using CSS3 touch events or here :touch CSS pseudo-class or something similar?