CODEWITHSUNDEEP
htmlcss
Angelos Chalaris
Angelos Chalaris

Reputation: 6747

CSS :hover behaviour on touchscreen devices

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 dropdowns open on hover, however I am uncertain how to go about implementing this with only CSS on mobile devices.

Having checked this answer previously, I confirmed what I partially knew to be true: that certain mobile browsers and devices will use the :hover pseudo-class when clicking an element, which will allow me to open dropdowns the way I want. Others say that :active works as well.

I am using both in one rule, as well as :focus to cover as many environments and cases as possible, however I am not certain this will work well across many devices. So my questions are:

Upvotes: 3

Views: 8395

Answers (1)

henry
henry

Reputation: 4385

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?

Upvotes: 6

Related Questions