Динамические псевдоклассы: :hover, :active и :focus

Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:

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

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

Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.

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

От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов псевдоклассов. Например, таблица стилей может специфицировать, что 'font-size' гиперссылки :active должен быть больше, чем у неактивной гиперссылки, но поскольку это может вызвать изменение положения букв при выборе пользователем гиперссылки, ПА может проигнорировать соответствующее правило стиля.

Пример(ы):

A:link { color: red } /* непосещённые ссылки */ A:visited { color: blue } /* посещённые ссылки */ A:hover { color: yellow } /* пользователь провёл над */ A:active { color: lime } /* активные ссылки */

Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.

Пример(ы):

Пример комбинации динамических псевдоклассов:

A:focus { background: yellow } A:focus:hover { background: white }

Последний селектор совпадает с элементами A, которые входят в псевдоклассы :focus и :hover.

О представлении контуров фокуса см. раздел динамические контуры фокуса.

Примечание. В CSS1 псевдокласс ':active' взаимно исключался с ':link' и ':visited'. Сейчас это уже не так. Элемент может быть и ':visited', и ':active' (или ':link' и ':active'), и нормальные правила каскадирования определяют применение свойств.

Содержание раздела