: активный - CSS-хитрости | CSS Альманах 2024

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

Например, вот CSS, который заставит якорные ссылки сдвинуться на один пиксель вниз (создавая впечатление, будто их выталкивают в трехмерном пространстве) в активном состоянии:

См. «Перо: активное состояние» от команды CSS-Tricks (@ css-tricks) на CodePen.

: Active также может применяться к любому элементу. В пером ниже щелчок в любом месте страницы сделает всю страницу желтой:

См. Демонстрацию пера класса: active psuedo от команды CSS-Tricks (@ css-tricks) на CodePen.

Лучше всего охватывать все «состояния», особенно для ссылок. Самый простой способ сделать это - «ЛЮБОВЬ, НЕНАВИЖИ» или

L: ссылка
O
V: посетил
E

H: навести
A: активен
T
E

Делать их в таком порядке идеально.

a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )

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