:active — CSS | MDN
In this article
- Синтаксис
- Пример
- Спецификации
- Совместимость с браузерами
- Смотрите также
Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
/* Любой элемент <a>, который будет активирован */
a:active {
color: red;
}
Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.
Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах.
:active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.
Error: could not find syntax for this item
Активные ссылки
HTML
<p>Этот абзац содержит ссылку: <a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a> У абзаца фон станет серым при нажатии на него или на ссылку. </p>
CSS
a:link { color: blue; } /* Непосещённые ссылки */
a:visited { color: purple; } /* Посещённые ссылки */
a:hover { background: yellow; } /* Ссылки при наведении */
a:active { color: red; } /* Активные ссылки */
p:active { background: #eee; } /* Активные абзацы */
Результат
Активные элементы формы
HTML
<form> <label for="my-button">Моя кнопка: </label> <button type="button">Попробуй Нажать Меня или Мою подсказку!</button> </form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Result
| Спецификация | Статус | Комментарий |
|---|---|---|
| HTML Living Standard Определение ‘:active’ в этой спецификации.  | Живой стандарт | |
| Selectors Level 4 Определение ‘:active’ в этой спецификации. | Рабочий черновик | Без изменений |
| Selectors Level 3 Определение ‘:active’ в этой спецификации. | Рекомендация | Без изменений |
| CSS Level 2 (Revision 1) | Рекомендация | Без изменений |
| CSS Level 1 Определение ‘:active’ в этой спецификации. | Рекомендация | Первоначальное определение |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.- Псевдоклассы, связанные с ссылками:
:link,:visitedи:hover.
Last modified: 
CSS/Псевдокласс :active
Синтаксис
[.класс]:active { свойства }Описание
Псевдокласс :active указывает веб-браузеру как необходимо изменить элемент при его активации.
| Применяется: | В CSS1 применяется только к элементам a с атрибутом «href»;Начиная с CSS2 может применяться к любым элементам. |
|---|---|
| Регистр символов псевдокласса: | не учитывается; |
| Медиа: | визуальные. |
Условия использования
:link» и «:visited». Начиная с CSS2 существовавший запрет был снят, т.о. теперь одновременно может сочетать сразу несколько псевдоклассов («:visited:active», «:link:active»).
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 2.1 Anchor pseudo-classes | Перевод |
| 2 | 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus | |
| 2.1 | 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus | Перевод |
| 2.2 | 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus | |
| 3 | 6. 6.1.2. The user action pseudo-classes :hover, :active, and :focus | Перевод |
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Эффект активации элемента</title>
<style type=»text/css»>
a:active { color: yellow; }
a:visited:active { color: pink; }
.box {
width: 300px;
height: 30px;
background-color: green;
}
div:active {
color: white;
}
</style>
</head>
<body>
<h2>Псевдокласс «:active»</h2>
<a href=»/css/active/ru_css3/»>Ссылка</a>
<div>Блок меняющий цвет (при нажатии)</div>
</body>
</html>
Эффект активации элемента
javascript. Есть ли css-эквивалент onclick из элемента html?
спросил
Изменено 5 лет, 10 месяцев назад
Просмотрено 6к раз
В javascript вы можете легко выполнять события onclick непосредственно из элемента html:
<дел>
Я знаю, что вы можете изменить стили css с помощью тега < style >, но мне интересно, сможете ли вы выполнить его аналогично приведенному ниже примеру:
- JavaScript
- HTML
- CSS
2
, если вы хотите сделать это исключительно через css , вы должны использовать :active или, может быть, : фокус :
div: hover { цвет: красный; } /* наведение мыши */
div: активный { цвет: красный; } /* мышь вниз (это также вызывает фокус) */
ввод: фокус { цвет: красный; } /* получили фокус (клавишей Tab или мышью) */
/* для элемента : */
а: ссылка { цвет: красный; } /* непросмотренные ссылки */
a: посетил { цвет: красный; } /* посещенные ссылки */
Примечание: :active не остается постоянным после того, как пользователь отпускает кнопку мыши для элементов, которые не получают фокуса (например, div), но работает для таких элементов, как ввод текста или кнопки.
есть обходной путь для этого называется «Взлом флажка» , где вы используете подключенную метку и ввод флажка, а также какой-либо другой элемент, которым вы пытаетесь управлять..
Кроме того, если вы хотите изменить класс CSS или встроенные стили, вы можете сделать следующее:
< div>Нажми на меня
className='newClassName';
}
ex1: hover, a.ex1: active { 