Для зміни кольору текстового посилання при наведенні на неї курсора миші застосовується псевдоклас :hover, який додається до селектора A. Спочатку через селектор A задаємо колір звичайних посилань, потім за допомогою :hover задаємо колір посилань при наведенні (приклад 1).
Приклад 1. Зміна виду посилання
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір посилань</title> <style> a { color: #0075B2; /* Колір звичайного посилання */
text-decoration: none; /* Забираємо підкреслення у посилань */
}
a:visited { color: #8F8E8E; /* Колір відвідуваного посилання */
}
a:hover { color: #CE242B; /* Колір посилання при наведенні */
text-decoration: underline; /* Додаємо підкреслення */
}
</style>
</head>
<body> <p><a href="#">Cras ingens iterabimus aequor</a> — завтра ми знову вийдемо у величезне море.</p>
</body>
</html>У цьому прикладі посилання стає підкресленим і змінює свій колір, коли на нього наводиться покажчик (рис. 1). Зауважте, що псевдоклас :hover у коді йде після :visited. Це має значення, інакше відвідані посилання не будуть змінювати свій колір.
Мал. 1. Вигляд посилання при наведенні
Аналогічно можна змінити і колір фону під посиланням при наведенні на неї, додавши властивість background до селектора a:hover, як показано в прикладі 2.
Приклад 2. Зміна кольору фону посилання
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон під посиланнями</title> <style> a { color: #000080; /* Колір звичайного посилання */
padding: 2px; /* Поля навколо тексту */
}
a:hover { text-decoration: none; /* Забираємо підкреслення */
color: #FFFAC0; /* Колір посилання */
background: #AB4A9C; /* Колір тла */
}
</style>
</head>
<body> <p><a href="#">Audaces fortuna juvat</a> — щастя заступається сміливим.</p>
</body>
</html>Результат цього прикладу показаний на рис. 2. Щоб текст не прилягав до фону, до селектора A додано властивість padding.
Мал. 2. Зміна кольору фону посилання