: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: посетил { цвет: красный; } /* посещенные ссылки */
есть обходной путь для этого называется «Взлом флажка» , где вы используете подключенную метку и ввод флажка, а также какой-либо другой элемент, которым вы пытаетесь управлять..Кроме того, если вы хотите изменить класс CSS или встроенные стили, вы можете сделать следующее:
< div>Нажми на меня
className='newClassName';
}
ex1: hover, a.ex1: active { 