it-swarm.com.ru

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

В чем разница между псевдоклассами :focus и :active?

244
Jitendra Vyas

: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, where my text just turns red
</button>

Правка: jsfiddle

354
Andrew Moore
: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 псевдоклассы

53
Rubens Farias

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

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

18
James Lawson

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

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

5
Emily

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

<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"/>
0
Anggie Aziz