В чем разница между: focus и: active?


Ответы:


413

:focusи :activeдва разных состояния.

  • :focus представляет состояние, когда элемент в настоящее время выбран для получения ввода и
  • :active представляет состояние, когда элемент в данный момент активируется пользователем.

Например, скажем, у нас есть <button>. Не <button>будет никакого состояния для начала. Это просто существует. Если мы используем Tab«фокус» для этого <button>, теперь он входит в свое :focusсостояние. Если вы затем нажмете (или spaceнажмете), вы затем заставите кнопку войти в ее состояние ( :active).

На этой ноте, когда вы нажимаете на элемент, вы даете ему фокус, который также культивирует иллюзию, что :focusи :activeто же самое. Они не одинаковы. При нажатии кнопка находится в :focus:activeсостоянии.

Пример:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

редактировать: jsfiddle


2
Также обратите внимание, что вы можете получить сфокусированный элемент, используя запутанно названное document.activeElementсвойство, хотя оно должно быть в пробном улове, потому что IE8 может вызвать исключение. И помните, что старые версии браузеров могут относиться к: active и: focus по-разному. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
Робокат

6
Я создал JSFiddle для вашего примера здесь: jsfiddle.net/NCwvj Тестирование в Chrome (v24) Я заметил, что нажатие кнопки вызывает только :activeсостояние
Заки Азиз

3
Nit: порядок фокуса и активный влияет на состояние кнопки HTML, если нет: active: состояние фокуса - Помещение: активное состояние после: focus, я получаю активные изменения, когда нажимаю клавишу Tab и пробел. Если: фокус последний, я никогда не вижу активного состояния.
Мэтт Гонт

@GauntFace, какой браузер вы используете? В Chrome порядок ваших объявлений focusи activeдекларации не имеет значения. Это имеет значение только тогда, когда они противоречат друг другу, например, color:redи color:blue(тогда побеждает последний).
Pacerier

Связанный вопрос и ответ, основанный на этом: stackoverflow.com/a/48597351/5587480 . С моей точки зрения, очень легко понять
Джон cj

59
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Источник: CSS Псевдо-классы


10
Хотя это связано, это не отвечает на вопрос
Грегор Вебер

6
@GregorWeber это показывает разницу, показывая определения
Kamil Kiełczewski

1
Вы, вероятно, знаете это, но если вы определите их в таком порядке, visitedссылки не будут менять стиль при наведении или нажатии, потому что их "посещаемость" переопределит другие псевдоклассы. LVHFA - это порядок, который большинство людей захотят использовать в большинстве случаев. Не уверен, почему вы включили lang...
Mentalist

22

Есть четыре случая.

  1. По умолчанию активный и фокус оба выключены.
  2. При закладке в цикле через форматируемых элементов , они войдут :focus(без активной).
  3. При нажатии на элемент без фокусировки , он входит :active(без фокуса).
  4. Когда вы нажимаете на фокусируемый элемент, он входит :active:focus(активен и фокусируется одновременно).

Пример:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Когда страница загружается, оба находятся в случае 1. Когда вы нажимаете клавишу Tab, вы фокусируете второй элемент Div и видите, что он демонстрирует случай 2. Когда вы нажимаете на первый элемент Div, вы видите случай 3. Когда вы нажимаете второй элемент Div, вы видите случай 4 ,


Является ли элемент фокусируемым или нет - это другой вопрос . Большинство не по умолчанию. Но, с уверенностью предположить <a>, <input>, <textarea>являются фокусируемыми по умолчанию.


Спасибо за указание, как элементы могут иметь, :activeно нет :focus. Это одна вещь, которую я смутил из-за того, что другие ответы не были адресованы.
B-Stewart

7

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

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


2
Здравствуй! Есть ли состояние для "в данный момент нажали"? Допустим, в навигационном меню есть три ссылки. Как заставить его сохранять определенный цвет, когда в данный момент он включен? чтобы показать пользователю, где он находится в данный момент. as: active работает только до тех пор, пока нажата ссылка (в данном случае), но изменяется при отпускании кнопки мыши.
Кизер Якудза

0

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

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

-3

Фокус может быть дан только с клавиатуры ввода, но элемент может быть активирован с помощью мыши или клавиатуры.

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


1
:focusне работает так. Текстовое поле, которое я набираю, в данный момент имеет фокус, потому что я нажал кнопку. Он также может потерять и восстановить фокус, щелкнув по нему снова и снова. Через секунду я собираюсь выделить кнопку «Добавить комментарий» справа, нажав на нее. Все это без ввода с клавиатуры, что вызывает фокус.
Джоэл Меллон

Если вы не можете сфокусироваться на ссылке, это просто потому, что ссылка не может быть сфокусирована, если вы не поставите ее на якорь или не добавите атрибут tabindex. Но вы можете фокусировать элементы DOM, такие как div или input.
Алекс

-5

Использование «фокуса» даст пользователям клавиатуры тот же эффект, который пользователи мыши получают при наведении курсора мыши. «Активный» необходим для получения того же эффекта в Internet Explorer.

Реальность такова, что эти состояния не работают, как они должны для всех пользователей. Неиспользование всех трех селекторов создает проблемы с доступностью для многих пользователей с клавиатурой, которые физически не могут использовать мышь. Я приглашаю вас принять вызов #nomouse (nomouse dot org).


1
: hover и: focus - это не одно и то же. : hover - это определенное состояние, а: focus - это определенное состояние. Это немного сбивает с толку и вводит в заблуждение приравнивать их.
Гарри Полли

1
Я не сомневаюсь в вашем опыте. Я пытаюсь указать, что: hover и: active - это не одно и то же. И это сбивает с толку тех, кто новичок в Интернете и доступности, когда он просто обозначен как: hover примерно равно: active для использования с клавиатурой. Я ценю ответ, но, возможно, немного больше глубины поможет?
Гарри Полли

Конечно, они не одно и то же! Я не говорил, что они были примерно одинаковыми. (Пожалуйста, прочитайте мои сообщения еще раз.) Я говорю о разнице между использованием мыши и клавиатуры для выполнения той же задачи. Я говорю, что вы должны использовать их все, чтобы дать обоим пользователям одинаковый опыт. В противном случае только пользователи с клавиатурой, которые физически не могут использовать мышь, будут сталкиваться с трудностями при просмотре места на вкладке. Это создает проблему доступности для этих людей при навигации по странице.
AMG
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.