Notes on styling avtive, hover and focus states
As a beginner you may style only the hover
states and forget about active
and focus
.
focus
is important in form design, this comes into play when you are tabbing through the input items andfocus
tells you what field is selected.active
is important in buttons, this is when you have clicked on a button and haven't let go of the mouse yet (the click is not yet over).active
tells you what you are actively pressing on..- the styles for
hover
,active
andfocus
can be grouped together andhover
andfocus
are usually the same. - the order in which you specify these styles is important.
- Link
- Visited
- Hover
- Active
- Focus