What is the default way an iOS device handles the :hover pseudo-class?

Question

I have a div that can be clicked (via jQuery $('.mydiv').click ) - this expands the div, a second click collapses it.

The same div has some CSS :hover rules applied to it (i.e. to show more info on hover) - this works as intended on a PC.

When using an iOS device, the click works, AND also applies the :hover pseudo-class - so my extra info shows up. This is pretty much exactly what I wanted to happen (amazingly).

However, just having something with a :hover pseudo-class in the CSS does not mean a click will reveal it.

So what are the rules that iOS is following to apply (or not) the :hover state? Are there some docs somewhere to view?

I don't really want to hide functionality under hovers and have to write some touch specific JavaScript to make them work because it seems that iOS is already doing some of that work for me - I just want to know how to use that functionality specifically rather than just happening across it!

Answer 1

As you're probably aware, iOS doesn't actually support the :hover pseudo-class simply because it uses a touch-based interface. It does fire mouse events in specific circumstances for compatibility reasons, but this behavior isn't the most reliable way to emulate or trigger an element's :hover state, since you can't actually hover an element with your finger the same way you do with a mouse pointer. From this tech note:

Additionally, Safari on iPhone OS users interact with your web content directly with their fingers, rather than using a mouse. This creates new opportunities for touch-enabled interfaces, but does not work well with hover states. For example, a mouse pointer can hover over a webpage element and trigger an event; a finger on a Multi-Touch screen cannot. For this reason, mouse events are emulated in Safari on iPhone OS. As a result, elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.

That said, since mouse events do correspond to mouse-based UI states in CSS, they are covered to a certain extent in the docs, but not by much. I did find something here:

The following web technologies are not supported on iOS:

• ...

• Mouse-over events

  The user cannot “mouse-over” a nonclickable element on iOS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”

• Hover styles

  Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iOS.

This implies that :hover is only supported on clickable elements. Clickable events are defined here as:

A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers.

With that said, if you want to provide a consistent and reliable user experience on iOS, your best bet is to design for touch, since that's what it's made for.