1
HTML/CSSAdvanced#css#pseudo-classes
HTML/CSSBeginner#css#pseudo-classes
What is the difference between :hover, :focus, and :active pseudo-classes?
:hover applies while the pointer is over an element. :focus applies when an element has keyboard/programmatic focus (crucial for accessibility, e.g. tabbing to a button). :active applies during the moment of activation, like a mouse button held down or a link being clicked.
Example
button:hover { background: #ddd; }
button:focus-visible { outline: 2px solid blue; }
button:active { transform: scale(0.98); }