Пример кода, покрывающего все события в один стиль:

// Not the best approach. I'll explain why in this article
.selector {
  &:hover,
  &:focus,
  &:active {
    // Styles here
  }
}

Стилизация состояния hover

Состояние hover инициируется, когда пользователь наводит свою мышь на элемент.

Состояние hover обычно представлено изменениями background-color (и\или color). Разница стилей между состоянием hover и его отсутствием не обязательно должна быть ярко выраженная, потому что пользователь уже знает, что он навел мышку на что-то.

button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}

Стилизация состояния focus

focus активируется, когда происходит фокусировка на элементе. Это может происходить в одном из двух случаев:

1. Когда пользователь переключается с помощью кнопки tab между элементами
2. Когда пользователь кликает на элемент, который поддерживает состояние focus

Следующие элементы поддерживают состояние focus:

• Ссылки (<a>)
• Кнопки (<button>)
• Элементы формы (input, textarea, и тому подобное)
• Элементы со свойством tabindex

Пара важных моментов:

1. Пользователь не может переключиться с помощью кнопки tab на элемент со свойством tabindex=”-1", но он может кликнуть на него, тем самым переключив элемент в состояние focus
2. В браузерах Safari и Firefox (на Mac) клик на элемент button не вызывает состояние фокусировки. Подробнее по этой ссылке https://zellwk.com/blog/inconsistent-button-behavior/
3. Когда вы нажимаете на элемент <a>, фокус остается на <a> до тех пора, пока вы не уберете палец с мыши. Когда вы все же уберете палец, фокус будет смещен в другой элемент, если атрибут href указывает валидный id элемента на вашей странице.

В случае состояния focus нас больше интересует, когда пользователь переключается между элементами с помощью кнопки tab, нежели когда он кликает на них мышкой.

Когда пользователь жмет tab, он не знает на какой элемент будет смещен фокус. Он может только догадываться. И поэтому нам требуется явное изменение стилей, чтобы пользователь заметил, что изменился фокус.

Использование стилизации по умолчанию состояния focus в большинстве случаев достаточно. Если же вы хотите сделать свой собственный дизайн для состояния focus, то подумайте о следующих вещах:

1. Использование css свойства outline.
2. Создание анимации с движением.
3. Изменение css свойства background-color.
4. Изменение css свойства color.

Так как зачастую css свойства background-color и color используются для состояния hover, то имеет смысл использовать css свойство outline или анимации для состояния focus.

Вы можете комбинировать свойства outline, border и box-shadow, чтобы создать хорошо выглядящие стили для focus. Я писал об этом в статье “Создание своих стилей для focus” https://zellwk.com/blog/creating-focus-style/

button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация состояния active

Когда вы взаимодействуете с различными вещами в реальной жизни, вы ожидаете ту или иную обратную связь. Например, если вы жмете кнопку, то вы ожидаете от кнопки быть нажатой.

Обратная связь так же полезна на веб-сайтах. Вы можете стилизовать нажатие кнопки с помощью состояния active. Состояние active инициируется, когда вы взаимодействуете с элементами. Под взаимодействием понимается следующее:

1. Удержание левой кнопки мыши на элементе (даже на тех, которые не поддерживают состояние focus).
2. Удержание кнопки пробела (на элементах button).

.
  button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

Два странных момента, на которые нужно обратить внимание:

1. Удержание кнопки пробел вызывает состояние active на элементах button, но удержание кнопки ввод этого не делает.
2. Нажатие на кнопку ввод активирует переход по ссылке, но не меняет их состояние на active. Нажатие на пробел не делает этого вообще.

Стили по умолчанию для ссылок

Ссылки имеют свой стиль по умолчанию. Они окрашиваются в красный цвет, когда вы по ним переходите.

Связь между состояниями active и focus

Когда вы зажимаете левую кнопку мыши на элементе, который поддерживает состояние focus, то вы переводите его в состояние active. В тоже время вы так же вызываете состояние focus.

? Это условие работает для всех элементов, на которых возможна фокусировка, кроме ссылок и кнопок.

Для ссылок:

1. Когда вы зажимаете левую кнопку мыши: инициализируются состояния active и focus в браузерах Firefox и Chrome, но в браузере Safari (проверено только на Mac) инициализируется только состояние active.
2. Когда вы отпускаете левую кнопку мыши: состояние focus остается на ссылке (кроме тех случаев, когда ссылка ведет на элемент на той же самой странице), но в браузере Safari фокус переходит обратно на элемент body.

Для кнопок:

1. Когда вы зажимаете левую кнопку мыши: инициализация состояний active и focus происходит только в браузере Chrome. Состояние focus не инициализируется при тех же самых действиях в браузерах Safari и Firefox (Mac). Я писал об этом странном поведении https://zellwk.com/blog/inconsistent-button-behavior/

Если вы хотите, чтобы клик на кнопку переводил ее в состояние focus, то вам нужно использовать следующий JavaScript как можно раньше (зачем это делать, вы можете прочитать по ссылке выше).

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

Как только вы использовали этот код, клик на кнопках будет вызывать следующее поведение:

1. Когда вы зажимаете левую кнопку мыши: инициализуется состояние active во всех браузерах. При этом focus происходит только в Chrome.
2. Когда вы отпускаете левую кнопку мыши: переключается состояние focus в браузерах Safari и Firefox (Mac). Фокус остается на кнопках в остальных браузерах.

Поведение кнопки в браузере Safari после добавления приведенного выше фрагмента JavaScript

Теперь вы знаете все о состояниях hover, focus и active. Давайте поговорим о их стилизации.

Магическая комбинация

Следующая магическая комбинация позволяет пользователю получать обратную связь, когда происходит изменение состояний hover, focus и active, и взаимодействовать с элементами.

Вот тот кусочек css, который вам потребуется:

.element:hover,
.element:active {
  /* Change background/text color */
}

.element:focus {
  /* Show outline */
}

Для пользователей мыши:

1. Когда пользователь наводит на элемент, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.
2. Когда пользователь кликает на элемент, используется свойство outline. Таким образом он получают обратную связь.

Для пользователей клавиатуры:

1. Когда пользователь переключается между элементами с помощью tab, то используется свойство outline. Таким образом он получают обратную связь.
2. Когда пользователь взаимодействует с элементов, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.

Лучшее из двух миров!

1. Я не очень тщательно проверял эту магическую комбинацию. Это лишь доказательство концепции. Я буду благодарен, если вы поможете мне различными тестами и дадите мне знает, как она будет использоваться в реальной жизни.
2. Для ваших тестов не используете Codepen. Поведение состояния focus очень странно в Codepen. Если вы наведете на ссылку, то контур (outline) ссылки будет удален. Почему? Я не знаю. Иногда я думаю, что лучше проверять подобные вещи без всяких модных инструментов. Используйте старый добрый HTML, CSS и JS.

Не магическая (но возможно более лучшая) комбинация

Как я уже упоминал ранее, нажатия на кнопки могут провоцировать странное поведение в браузерах Safari и Firefox (Mac). Если вы добавите фрагмент JavaScript, который я ранее показал вам, то магическая комбинация будет работать. Однако, это неидеальное решение.

Вот что происходит в случае Safari и Firefox (Mac):

1. Когда пользователь зажимает левую кнопку мыши, ничего не меняется.
2. Когда пользователь отпускает левую кнопку мыши, то происходит фокусировка на элементе.

Если для вас этого достаточно, то тогда магическая комбинация работает достаточно хорошо. Вам больше ничего не требуется.

Но если вы считаете иначе, то вам необходимо стилизовать состояния hover, focus и active независимо друг от друга.

.element:hover {
  /* Change background/text color */
}

.element:active {
  /* Another change in background/text color */
}

.element:focus {
  /* Show outline /*
}

Поведение кнопки в Safari, если вы применили все три стиля.

И это все! Надеюсь, что вы выучили сегодня что-то полезное.

Спасибо за чтение. Помогла ли вам эта статья? Если да, то я надеюсь, вы поделитесь ей. Это может помочь кому-то еще. Большое спасибо!