Css active hover focus: :hover, :focus, :active, или зачем указывать состояния элементам — журнал «Доктайп»

Leave a Comment / Css / By /

Содержание

:hover, :focus, :active, или зачем указывать состояния элементам — журнал «Доктайп»

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

В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.

Основные состояния интерактивных элементов

:hover

Состояние :hover срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.

<a href="#">Меню</a>

.link {
  color: #000000;
}
.link:hover {
  color: #00B3FF;
}
Состояние: hover

:focus

Состояние :focus срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab. Применяется состояния ко всем интерактивным элементам — <button>, <a>, <input>, <select> и элементам с tabindex.

Существует также состояние :focus-visible, которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.

<ul>
  <li><a href="#">Меню</a></li>
  <li><a href="#">О компании</a></li>
</ul>

.link {
  color: #000000;
}
.link:focus {
  color: #00e48c;
  border: 1px solid blue;
}
Состояние: focus

:active

Состояние :active срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.

<a href="#">Главная</a>

.link {
  color: #000000;
}
.link:active {
  color: #ea5454;
}
Состояние: active

Как состояния влияют на доступность сайта

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

Рекомендуется обязательно указывать состояния :hover, :focus и :active для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.

В формах обратной связи состояние :focus используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.

Разные состояния поля формы

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

:hover и :active, чтобы пользователь мог отличить, какой элемент он выбрал.

Поэтому прописывать все состояния вместе не всегда хорошая идея:

.a:hover,
.a:focus,
.a:active {
}

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

.a:hover {}
.a:focus {}
.a:active {}

Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.

Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.

Материалы по теме

  • CSS-селекторы. Шпаргалка для новичков
  • Как убрать подчёркивание ссылок
  • Как сделать всплывающую подсказку

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

.selector {
  &:hover, 
  &:focus,
  &:active {
    ...
  }
}
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Давайте начнём с :hover.

Стилизация наведения (:hover)

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

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

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

Стилизация фокуса (:focus)

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

  1. при выборе элемента кнопкой «Tab»
  2. при щелчке на элемент мышью
К фокусным элементам относятся:

  1. Ссылки (<a>)
  2. Кнопки (<button>)
  3. Элементы формы (<input>, <textarea> и т. д)
  4. Элементы с атрибутом tabindex
Следует помнить о некоторых важных моментах:

  1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
  2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>
  3. При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id
Стилизуя состояние фокуса, мы больше заботимся о пользователях, работающих с интерфейсом с клавиатуры, чем о тех, кто использует мышь.

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

  1. Добавление обводки (outline)
  2. Создание анимаций
  3. Изменение background-color
  4. Изменение color
Поскольку изменение свойств background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline,

border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}
 
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

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

  1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
  2. Удержание кнопки пробела (на кнопках)
button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

Две особенности, которые следует принять к сведению:

  1. Удержание пробела вызывает состояние :active у кнопок (<button>), но при удержании Enter этого не происходит
  2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

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

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

  1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния
    :active     и :focus. В Safari – только состояние :active (проверено только на Mac OS)
  2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>
Для кнопок:

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

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})
Добавление этого кода изменит поведение нажатия кнопок на следующее:

  1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
  2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

.element:hover,
.element:active {
  /* Изменить цвет фона/текста  */
}
 
.element:focus {
  /* Показать обводку */
}
Для пользователей мыши:

  1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
  2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

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

  1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
  2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

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

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

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

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

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

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover {
  /* Изменить цвет фона/текста  */
}
 
.element:active {
  /* Иные изменения в цвете фона и текста */
}
 
.element:focus {
  /* Показать обводку */
}

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

CSS :focus Selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Выбор и стиль поля ввода, когда оно получает фокус:

ввод:фокус {
  фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :focus используется для выбора элемента, имеющего фокус.

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

Версия: CSS2

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:фокус 4,0 8,0 2,0 3. 1 9,6

Синтаксис CSS

:focus {
  объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Когда получает фокус, постепенно меняйте ширину от 100 пикселей до 250 пикселей:

input[type=text] {
 ширина: 100 пикселей;
  переход: плавность входа-выхода, ширина 0,35 с плавного входа-выхода;
}

input[type=text]:focus {
  ширина: 250 пикселей;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая Справочник по селекторам CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 02 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Различные стили наведения, фокуса и активных состояний

Опубликовано

Я использовал стили :hover , :focus и :active в течение многих лет. Я не могу вспомнить, когда я начал стилизовать таким образом. Вот код, который я всегда использую:

.
 // Не лучший подход. Я объясню, почему в этой статье
.селектор {
  &: наведите курсор,
  &: фокус,
  &: активный {
    // Стили здесь
  }
}

По мере того, как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусу), я начал думать, что мы не должны стилизовать одинаковые состояния наведения, фокуса и активных состояний.

Наведение, фокус и активные состояния должны иметь разные стили.

Причина проста: это разные штаты!

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

Начнем с :hover .

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

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

 кнопка {
  цвет фона: #dedede;
}
кнопка:наведите {
  цвет фона: #ааа;
}

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

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

Фокусируемые элементы:

  1. Ссылки ( )
  2. Кнопки ( <кнопка> )
  3. Элементы формы ( input , textarea и т. д.)
  4. Элементы с вкладкой

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

  1. Пользователи не могут перейти к элементу с tabindex="-1" , но на него можно нажать. Щелчок активирует фокус.
  2. В Safari и Firefox (Mac) клики не фокусируют элемент
  3. Когда вы щелкаете ссылку ( ), фокус остается на ссылке до тех пор, пока вы не уберете палец с мыши. Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

Чтобы сфокусироваться, нас больше беспокоят пользователи, которые вводят элементы с помощью табуляции, а не нажимают на них.

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

Стиль фокусировки по умолчанию подходит в большинстве случаев. Если вы хотите создать свой собственный фокус, подумайте об этих четырех вещах:

  1. Добавление контура
  2. Создание анимации с движением
  3. Изменение цвета фона
  4. Изменение цвет

Поскольку изменения background-color и color часто сопровождают :hover , имеет смысл, что контуры или анимации должны сопровождать :focus .

Вы можете использовать комбинацию свойств контур , граница и box-shadow для создания красивых стилей фокуса. Я рассказываю, как это сделать, в разделе «Создание пользовательского стиля фокуса».

 кнопка {
  цвет фона: #dedede;
}
кнопка:наведите {
  цвет фона: #ааа;
}
кнопка: фокус {
  контур: нет;
  box-shadow: 0 0 0 3px светло-голубой;
}

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

Этот отзыв полезен и на веб-сайтах. Вы можете стилизовать момент «кнопки» с помощью :active . :active срабатывает при взаимодействии с элементом . Взаимодействие здесь означает:

  1. Удерживая левую кнопку мыши на элементе (даже не находящемся в фокусе)
  2. Удержание клавиши пробела (на кнопках)
 кнопка: активная {
  цвет фона: #333;
  цвет границы: #333;
  цвет: #еее;
}

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

  1. Удерживание пробела вызывает :active на кнопках, а удерживание Enter — нет.
  2. Enter запускает ссылки, но не создает активное состояние. Пробел вообще не вызывает ссылки.

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

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

Связь между активным и фокусным

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

При отпускании левой кнопки мыши фокус остается на элементе

👆 верно для большинства фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

  1. При удерживании левой кнопки мыши: срабатывает :active и :focus Состояние в Firefox и Chrome Только триггеры активны в Safari (проверено только на Mac)
  2. Когда вы отпускаете левую кнопку мыши: :focus остается на ссылке (если ссылка href не соответствует id на той же странице). В Safari фокус возвращается к .

Для кнопок:

  1. При удерживании левой кнопки мыши: Триггеры :активны и :состояние focus только в Chrome. Вообще не вызывает :focus в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

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

 document.addEventListener('щелчок', событие => {
  если (event.target.matches('кнопка')) {
    событие.цель.фокус()
  }
})

После того, как вы получите этот код, поведение кнопок станет следующим:

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

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

Теперь вы знаете о наведении, фокусе и активных состояниях, я хочу поговорить о стилях для всех трех.

Волшебная комбинация

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

 .элемент:наведение,
.элемент: активный {
  /* Изменить цвет фона/текста */
}
.элемент: фокус {
  /* Показать контур /*
}

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

  1. Когда пользователь наводит курсор на элемент, background-color (и/или color ) меняется. Они получают обратную связь.
  2. : Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.

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

  1. Когда пользователь нажимает на элемент, отображается контур фокуса. Они получают обратную связь.
  2. Когда они взаимодействуют с элементом, цвет фона (и/или цвет ) меняется. Они получают обратную связь.

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

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

Неволшебная (но может быть и лучше) комбинация

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *