Как установить css свойство для состояния :hover на JS/Jquery?
Это будет работать даже, если был установлен параметр hover в CSS у данного элемента.
Отслеживать
51.6k 201 201 золотой знак 65 65 серебряных знаков 246 246 бронзовых знаков
ответ дан 22 фев 2020 в 12:09
Denis640Kb Denis640Kb
14.1k 5 5 золотых знаков 22 22 серебряных знака 46 46 бронзовых знаков
То же самое на Jquery. var elem = document.getElementById(‘opacity’); elem.mouseover(function()< elem.css("opacity", 0.6); >) elem.mouseleave(function () < elem.css("opacity", 1); >) еще не разобрался с этим вашим форматированием. Спасибо за ответ.
Состояние компонента
Метод setState() планирует изменение объекта состояния ( state ) компонента. Когда состояние меняется, компонент рендерится повторно.
Какая разница между state и props ?
props (намеренно сокращённо от англ. «properties» — свойства) и state — это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: props передаётся в компонент (служат как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).
Несколько полезных ресурсов для дальнейшего изучения, в каких случаях использовать props , а в каких — state :
- Props vs. State
- ReactJS: Props vs State
Почему setState даёт неверное значение?
В React как this.props , так и this.state представляют значения, которые уже были отрендерены, например, то, что видите на экране.
Вызовы setState являются асинхронными, поэтому не стоит рассчитывать, что this.state отобразит новое значение мгновенно после вызова setState . Необходимо добавить функцию, которая сработает только после обновления состояния, если нужно получить новое значение, основанное на текущем состоянии (ниже подробный пример).
Пример кода, который не будет работать так, как ожидаем:
incrementCount() // Примечание: это *не* сработает, как ожидалось. this.setState(count: this.state.count + 1>); > handleSomething() // Допустим, что `this.state.count` начинается с 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // Когда React делает последующий рендер компонента, `this.state.count` будет 1, хотя мы ожидаем 3. // Так происходит, потому что функция `incrementCount()` берёт своё значение из `this.state.count`, // но React не обновляет `this.state.count`, пока компонент не отрендерится снова. // Получается, что `incrementCount()` обращается к текущему значению `this.state.count`, а это 0 каждый раз, и добавляет 1. // Как исправить это — разберём ниже! >Далее перейдём к исправлению указанной проблемы.
Как обновить состояние значениями, которые зависят от текущего состояния?
Нужно добавить функцию вместо объекта к setState , которая будет срабатывать только на самой последней версии состояния (пример ниже).
В чём разница между добавлением объекта или функции к setState ?
Добавление функции даёт вам доступ к текущему состоянию внутри самой функции. Так как setState вызовы «сгруппированы», это помогает связать изменения и гарантирует, что они будут выполняться друг за другом, а не конфликтовать.
incrementCount() this.setState((state) => // Важно: используем `state` вместо `this.state` при обновлении. return count: state.count + 1> >); > handleSomething() // Возьмём снова для примера, что `this.state.count` начинается с 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // Если посмотреть на значение `this.state.count` сейчас, это будет по-прежнему 0. // Но когда React отрендерит компонент снова, будет уже 3. >Когда setState работает асинхронно?
В настоящее время setState работает асинхронно внутри обработчиков событий.
Это даёт гарантию, например, когда Родитель и Ребёнок вызывают setState во время клика, Ребёнок не будет рендериться дважды. Вместо этого React «откладывает» обновление состояния в самый конец событий в браузере. Это помогает сильно повысить производительность больших приложений.
Но не стоит полностью полагаться на такое поведение. В будущих версиях React будет использовать отложенные обновления состояния по умолчанию не только в обработчиках событий.
Почему React не обновляет this.state синхронно?
Как говорилось ранее, React намеренно «ждёт» пока все компоненты вызовут setState() в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.
Вы можете задаваться вопросом: почему React не может просто сразу обновить this.state без повторного рендеринга?
На это есть две причины:
- Это нарушит логику работы props и state , а значит станет причиной многих багов, которые будет сложно исправить.
- Это сделало бы невозможным реализацию некоторых возможностей, над которыми мы сейчас работаем.
Этот GitHub-комментарий рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.
Стоит ли использовать такие библиотеки, как Redux или MobX?
Но вообще будет здорово сначала изучить React, прежде чем переходить к библиотекам. Можно создать готовое рабочее приложение, используя только React.
Псевдоклассы, псевдоэлементы
Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Узнать о селекторах псевдокласса и псевдоэлемента. |
Что такое псевдокласс?
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
:pseudo-class-name
Простой пример псевдокласса
Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:
Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)
Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:
Примечание: Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для , не только к первому дочернему абзацу — :first-child равнозначно *:first-child . Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.
Псевдоклассы пользовательского действия
Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:
- :hover — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
- :focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
Что такое псевдоэлемент?
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия :: .
::pseudo-element-name
Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.
Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.
Он действует так, как если бы волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.
Вы можете видеть, что селектор выбирает первую строку обоих абзацев.
Объединение псевдоклассов и псевдоэлементов
Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line . Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента
, который находится внутри элемента .
article p:first-child::first-line font-size: 120%; font-weight: bold; >
Генерация контента с помощью ::before и ::after
Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.
Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.
Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.
В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block , чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.
Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется «генерируемым контентом» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов ::before и ::after . Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство content , чтобы увидеть, что добавляется в документ..
Справочный раздел
Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.
Псевдоклассы
| Селектор | Описание |
|---|---|
| :active | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. |
| :any-link | Соответствует как состоянию :link, так и состоянию :visited ссылки. |
| :blank | Соответствует элементу , для которого значение ввода является пустым. |
| :checked | Соответствует переключателю или флажку в выбранном состоянии. |
| :current (en-US) | Соответствует элементу или предку элемента, который в данный момент отображается. |
| :default | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов. |
| :dir | Выбирает элемент на основе его направленности (значение атрибута HTML dir (en-US) или свойства CSS direction ). |
| :disabled | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. |
| :empty | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. |
| :enabled | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. |
| :first | В постраничном носителе соответствует первой странице. |
| :first-child | Соответствует элементу, который является первым среди других дочерних элементов одного предка. |
| :first-of-type | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. |
| :focus | Соответствует элементу, имеющему фокус. |
| :focus-visible | Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю. |
| :focus-within | Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус. |
| :future (en-US) | Соответствует элементам после текущего элемента. |
| :hover | Соответствует элементу, на который наведён курсор мыши. |
| :indeterminate | Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes (en-US) . |
| :in-range | Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона. |
| :invalid | Соответствует элементу, например , в недопустимом состоянии. |
| :lang | Соответствует элементу, основанному на языке (значение атрибута HTML lang). |
| :last-child | Соответствует элементу, который является последним среди других дочерних элементов одного предка. |
| :last-of-type | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. |
| :left | В постраничном носителе соответствует левосторонним страницам. |
| :link | Соответствует непосещавшимся ссылкам. |
| :local-link (en-US) | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. |
| :is() | Соответствует любому селектору из полученного списка селекторов. |
| :not | Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору. |
| :nth-child | Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы
) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-last-child | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :nth-last-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы ), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :only-child | Соответствует элементу, являющемуся единственным дочерним для своего предка. |
| :only-of-type | Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка. |
| :optional | Соответствует необязательным элементам формы. |
| :out-of-range | Соответствует элементу с диапазоном, когда его значение находится вне диапазона. |
| :past (en-US) | Соответствует элементам перед текущим элементом. |
| :placeholder-shown | Соответствует элементу input, который показывает текст-заполнитель. |
| :playing (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «воспроизводится». |
| :paused (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «приостановлен». |
| :read-only | Соответствует элементу, который не может быть изменён пользователем. |
| :read-write | Соответствует элементу, который может быть изменён пользователем. |
| :required | Соответствует обязательным элементам формы. |
| :right | В постраничном носителе соответствует правосторонним страницам. |
| :root | Соответствует элементу, который является корнем документа. |
| :scope (en-US) | Соответствует любому элементу, который является элементом области видимости. |
| :valid | Соответствует элементу, такому как , в допустимом состоянии. |
| :target | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment). |
| :visited | Соответствует посещённым ссылкам. |
Псевдоэлементы
| Селектор | Описание |
|---|---|
| ::after | Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента. |
| ::before | Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента. |
| ::first-letter | Соответствует первой букве элемента. |
| ::first-line | Соответствует первой строке содержимого порождающего элемента. |
| ::grammar-error | Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером. |
| ::marker | Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число. |
| ::selection | Соответствует части документа, которая была выбрана. |
| ::spelling-error (en-US) | Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером. |
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Оформляйте стили наведения, фокуса и активного состояния по-разному
В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.
Вот пример кода, который всегда использовал.
.selector < &:hover, &:focus, &:active < . >> Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Давайте начнём с :hover .
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Обычно это состояние заключается в изменении цвета фона background-color и/или текста color . Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.
button < background-color: #dedede; >button:hover
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
- при выборе элемента кнопкой «Tab»
- при щелчке на элемент мышью
- Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex=»-1″ , но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
- В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов
- При клике на ссылку , фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
- Добавление обводки (outline)
- Создание анимаций
- Изменение background-color
- Изменение color
Вы можете использовать комбинации свойств outline , border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».
button < background-color: #dedede; >button:hover < background-color: #aaa; >button:focus
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active . Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:
- Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
- Удержание кнопки пробела (на кнопках)
button:active
Две особенности, которые следует принять к сведению:
- Удержание пробела вызывает состояние :active у кнопок (), но при удержании Enter этого не происходит
- Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
- При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus . В Safari – только состояние :active (проверено только на Mac OS)
- Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на
- Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.
document.addEventListener('click', event => < if (event.target.matches('button')) < event.target.focus() >>) Добавление этого кода изменит поведение нажатия кнопок на следующее:
- При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
- Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах
Поведение кнопок в Safari после добавления фрагмента JS-кода
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
.element:hover, .element:active < /* Изменить цвет фона/текста */ >.element:focus < /* Показать обводку */ >Для пользователей мыши:
- Когда пользователь наводит на элемент, меняется background-color (и/или color ). Происходит отклик.
- Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.
Для пользователей клавиатуры:
- Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
- Когда они взаимодействуют с элементом, меняется background-color (и/или color ). Происходит отклик.
Лучшее из обоих миров!
- Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
- Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
- Когда пользователь держит кнопку мыши нажатой, ничего не меняется
- Когда пользователи отпускают кнопку, элемент получает фокус
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover , :focus и :active по отдельности.
.element:hover < /* Изменить цвет фона/текста */ >.element:active < /* Иные изменения в цвете фона и текста */ >.element:focus < /* Показать обводку */ >Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.