Css hover active focus

Css hover active focus

Элементу, получившему фокус, можно задать стиль с помощью псевдокласса :focus [w3.org].

Чем отличаются :active, :focus и :hover

:active, :focus и :hover равнозначны, побеждает тот, что ниже.

:focus для тегов HTML: input, select и textarea

:focus для всех тегов HTML

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

Как снять фокус CSS

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

Нажатие и на зелёное поле, и на синее приведёт к смене фона. Клик по синему полю не снимет фокус.

Нажатие только на зелёное поле приведёт к смене фона. Клик по синему полю снимет фокус с родителя, установит фокус на внутреннем div.

Нажатие на зелёное поле приведёт к смене фона. Повторный щелчок снимет фокус.

Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.

Динамические псевдоклассы

CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:

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

Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, которому принадлежит фокус ввода. Чаще всего это поля форм регистрации и поиска.

:hover отвечает за элементы, над которыми размещен указатель мышки или другого устройства. В момент когда пользователь активирует какой-то объект на странице, например, кликает по ссылке, появляется псевдокласс :active

Возможности применения псевдоклассов

Стили для :active, :focus, :hover — это своеобразный способ общения с пользователем. Так вы подсказываете куда вводить данные, подчеркивает ссылки, выделяете элементы по которым можно нажать. С помощью удачных эффектов вы мотивируете посетителя ввести адрес электронной почты и подписаться на вашу рассылку. Благодаря красивым кнопкам «Войти!», «Читать дальше!» у тех, кто случайно попал на страницу, возникнет желание путешествовать по сайту дальше.

Читайте также:  Dns сервер без рекламы

Но не применяйте псевдоклассы слишком усердно. Если вы добавите :hover почти ко всем элементам, у посетителей вашего сайта может начаться морская болезнь от массы увеличивающихся или мигающих объектов. Применяйте CSS псевдо-класс focus для изменения цвета рамки полей, не более. Лучший способ грамотно назначить :hover — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер — от этого могут пострадать соседние элементы.


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

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

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

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

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

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

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

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

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

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

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

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

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

К фокусным элементам относятся:

и т.д)

  • Элементы с атрибутом tabindex
  • Следует помнить о некоторых важных моментах:

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

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

    1. Добавление обводки (outline)
    2. Создание анимаций
    3. Изменение background-color
    4. Изменение color

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

    Читайте также:  Hp velocity что это за программа

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

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

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

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

    1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
    2. Удержание кнопки пробела (на кнопках)

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

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

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

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

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

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

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

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

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

    Для кнопок:

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

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

    Добавление этого кода изменит поведение нажатия кнопок на следующее:

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


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

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

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

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

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

    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 по отдельности.


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

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

    Ссылка на основную публикацию
    Adblock detector