Don't use :hover to show/hide content

gistfile1.md

• Touch devices don't have a way to hover over an item.
• Many keyboard+mouse devices have touchscreens too.
• You cannot detect if a device supports :hover or is a touch device in CSS.
• This isn't even solvable in theory because how a device gets used changes from one second to the next. (ie. move your hand from the mouse to the screen or back.)
• Eventually all browsers and devices will be touch-capable which won't tell you anything about how the user will be using the device later at any particular moment.
• Consider that whether the tap or click that is still going to occur in future is going to support a :hover effect or not might affect your decision to show that extra information that would be revealed by the effect ahead of time or not.
• A touch device might sometimes show :hover on the first tap.
• Subsequent taps on different elements might trigger the :hover, it might also follow the link.
• Either way the :hover effect doesn't clear, because there's no corresponding "mouse out" action.
• Unless maybe subsequent taps on other things that have a :hover effect actually triggers that effect first instead of just following the link.
• My experiments show that touch browsers tend to follow the link AND show the :hover effect on tap, so you see the revealed content for a brief moment before it disappears. Depending on your connection speed.
• Is it even defined in a spec somewhere what browsers should be doing?
• Can you rely on what all touch-capable browsers will be doing?
• Even if all touch-capable browsers always reliably did the same thing, is that even a good user experience?