Разное

Css при нажатии: :active — CSS | MDN

22.01.2023

: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)
Определение ‘:active’ в этой спецификации.
Рекомендация Без изменений
CSS Level 1
Определение ‘:active’ в этой спецификации.
Рекомендация Первоначальное определение

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Псевдоклассы, связанные с ссылками: :link, :visited и :hover.

Last modified: , by MDN contributors

CSS/Псевдокласс :active

Синтаксис

[.класс]:active { свойства }

Описание

Псевдокласс :active указывает веб-браузеру как необходимо изменить элемент при его активации.

Применяется: В CSS1 применяется только к элементам a с атрибутом «href»;
Начиная с CSS2 может применяться к любым элементам.
Регистр символов псевдокласса: не учитывается;
Медиа: визуальные.

Условия использования

В CSS1 было запрещено одновременное использование данного псевдокласса с такими псевдоклассами как «: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 {

background-color: blue;
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>Нажми на меня

0

Есть, но элемент должен иметь атрибут tabindex.

С tabindex на элементе вы можете использовать:

 element:focus {
 /* некоторый_CSS; */
}
 

‘some_CSS’ срабатывает при нажатии на элемент.

3

Вы можете использовать JavaScript для изменения стиля div или любого другого элемента. Но я не знаю, есть ли способ изменить css с помощью события onclick без использования javascript.

Я могу объяснить свой метод.

 <скрипт>
функция change_css () {
 document.getElementById('change_css'). className='newClassName';
}

контент

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

Чтобы добавить дополнительный класс в div без замены существующих классов, используйте следующий оператор в javascript:

 document.getElementById('change_css').className+=' newClassName';
 

3

CSS :active Селектор

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


Пример

Выберите и настройте активную ссылку:

a:active {
цвет фона: желтый;
}

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

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


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

Селектор :active используется для выбора и оформления активной ссылки.

Ссылка становится активной при нажатии на нее.

Совет: Селектор :active можно использовать для всех элементов, кроме только ссылки.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и селектор :hover для оформления ссылок при наведении курсора их.

Примечание: :active ДОЛЖЕН идти после :hover (если присутствует) в CSS определение для того, чтобы быть эффективным!

Версия: CSS1

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

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

Селектор
:активный 4,0 7,0 2,0 3.1 9,6


Синтаксис CSS

:актив {
  объявления css ;
}



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

Пример

Выбор и стиль элемента

,

и

при щелчке по нему:

p:active, h2:active, a:active {
цвет фона: желтый;
}

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

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

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

Пример

Ссылки на разные стили:

a. ex1: hover, a.ex1: active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

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


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

Учебник CSS: Ссылки CSS

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

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


ВЫБОР ЦВЕТА



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

Основные ссылки
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

3 Top1s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.