Is there any workaround for :hover selector on iPad?

Question

The use case is that I have to display menu items when user hover on a particular row. It seems that it is not working properly on iPad. Is there any work around for that?

Help appreciated, Thanks

Answer 1

These following 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. This is a part of the answer from previously asked questions