Back to the index.
Of course :hover does not really work on touchscreen devices, since there is no concept of hovering. Instead, :hover styles are applied when the user has touched an element, and removed when he touches another element.
The same problem goes for :active, and there is no way to show active styles on elements other than links on touchscreen devices.
The :hover pseudoclass allows you to define the styles of an element the mouse hovers over. :active means:
an element that the user holds the mouse button depressed on.
In very old browsers they only worked for links, but nowadays they have been ported to all other elements.
Test link for a:hover and a:active.
This paragraph is especially for iOS. It has an (empty) onclick handler, and thus touches should be registered.
Testsheet:
p:hover {color: #CB000F;}
p:active {text-decoration: underline;}
a:hover {text-decoration: overline;}
a:active {font-weight: 600;}