Стани посилань на CSS

Я думаю, що ви, відвідуючи різні сайти в Інтернеті звертали увагу на те, що посилання зазвичай реагують на наведення мишкою на них. Такого ефекту можна досягти, задаючи поведінку посилань у різних станах.

Наприклад, ось так - a:hover - ми спіймаємо стан, коли на посилання навели курсор миші. У цей момент ми можемо, наприклад, змінити колір посилання або прибрати/додати їй підкреслення. Конструкція :hover називається псевдокласом. Псевдокласи позволяют отлавливать разные состояния элементов.

Окрім :hover є ще псевдокласи :link,які відловлюють не відвідане посилання, та :visited, які відловлюють відвідуване посилання. На деяких сайтах з їх допомогою показують користувачам, де вони були, а де – ні. Є ще й псевдоклас :active, який відловлює наступний стан: на елемент натиснули мишкою, але ще не відпустили.

У наступному прикладі для посилання в стані :hover прибирається підкреслення, в стані :link задається червоний колір, в стані :visited - зелений, в :active - блакитний. В результаті вийде, що на початку посилання буде червоного кольору, після натискання на неї – зеленого, якщо натиснути на неї мишкою і не відпускати - блакитного, а якщо навести мишкою – стане непідкресленою.

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">посилання</a>

Решітка # в адресі посилання є спеціальним заповнювачем, який використовують, коли не важливо, куди веде посилання. При переході за таким посиланням ви будете потрапляти на сторінку. Можна вказувати не одну решітку, а декілька.

Нюанси

Псевдокласи успадковують один від одного. Наприклад, якщо я приберу підкреслення для стану :link, то воно прибереться для всіх станів.

Через успадкування для коректної роботи дані псевдокласи слід розміщувати саме у такому порядку, як у прикладі: :link, :visited, :hover, :active (Непотрібні можна не писати). Цей порядок підпорядковується наступному мнемонійному правилу: LoVe HAte.

Зробіть всі посилання в стані :hover червоними та непідкресленими, у стані :link - блакитними, у стані :visited - зеленими, у стані :active - чорними.

Стани link і visited

Часто стани :link і :visited об'єднують разом через кому:

a:link, a:visited {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">посилання</a>

В такому разі можна їх взагалі і не вказувати:

a {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">посилання</a>

Звичайне використання

Як правило, вказуються стани для всіх типів посилань одночасно, а потім нижче додаються особливості поведінки посилання при наведенні мишкою, ось так:

a {
	color: red;
}
a:hover {
	text-decoration: none;
}

<a href="#">посилання</a>

Зробіть усі посилання у всіх станах блакитними і непідкресленими, а в стані :hover - червоними та підкресленими.