Разница между псевдоклассами :focus, :hover и :active в CSS заключается в том, что каждый из них применяется к определённому состоянию элемента:

1. :focus — применяется, когда элемент находится в фокусе, например, при нажатии на него или при переходе к нему с помощью клавиши табуляции. 18 Чаще всего используется для инпутов и других формовых элементов. 1
2. :hover — применяется, когда пользователь наводит курсор на элемент, например, ссылку или кнопку. 23 Часто используется для изменения внешнего вида ссылок и кнопок при наведении. 1
3. :active — применяется, когда элемент активирован, то есть когда пользователь уже кликнул на него, но ещё не отпустил кнопку мыши. 29 Часто используется для создания эффекта «нажатия» на кнопку или ссылку. 3