What is the difference between `:hover` and `:active` pseudo-elements?

`:hover` applies styles when the mouse cursor is over an element. `:active` applies styles when an element is being actively clicked (i.e., the mouse button is pressed down and the finger is on the element). `:active` is typically used for visual feedback during interaction, while `:hover` provides a general state change when the user interacts with the element indirectly (e.g., by moving the mouse). They are distinct states, and the correct choice depends on your design goal.