Какие основные отличия между состояниями :hover, :focus и :active в CSS?

Некоторые отличия между состояниями :hover, :focus и :active в CSS:

1. Условия срабатывания:

• hover — элемент изменяется при наведении на него курсора мыши. vk.com webref.ru На сенсорных экранах срабатывает при нажатии пальцем на элемент. vk.com При работе с клавиатурой этот псевдокласс не задействован. vk.com
• focus — элемент активируется при клике на него или переходе на него с клавиатуры при помощи клавиши tab. htmlacademy.ru gitverse.ru Новые свойства держатся до тех пор, пока элемент не будет дезактивирован. vk.com
• active — элемент становится активным, когда пользователь уже кликнул на него, но ещё не отпустил кнопку мыши. vk.com gitverse.ru Как только пользователь отпустит левую клавишу мыши, действие :active прекратится. vk.com

1. Применение:

• hover часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. htmlacademy.ru Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат. htmlacademy.ru
• focus применяется ко всем интерактивным элементам — <button>, <a>, <input>, <select> и элементам с tabindex. htmlacademy.ru В формах обратной связи это состояние используется для выделения активного поля при навигации с помощью клавиатуры. htmlacademy.ru
• active в основном используется для ссылок (a) и кнопок (button), но может также применяться и для других элементов. itchief.ru Часто используется для создания эффекта «нажатия» на кнопку или ссылку. htmlacademy.ru

1. Порядок написания в CSS: :hover идёт первым, :active пишется последним. webref.ru Обычно пользователь сначала наводит курсор на элемент, затем фокусирует его, а затем активирует. vk.com