| Internet Explorer | Chrome | Opera | Safari | Firefox |
| 10+ | 25+ | 12.10+ | 6.1+ | 16+ |
Завдання
Плавно змінити колір посилання при наведенні на неї покажчика миші.
Рішення
Колір посилання встановлюється через властивість color, яке додається до селектору A. Для зміни кольору посилання при наведенні на неї курсора миші застосовується псевдоклас :hover, а щоб зміна кольору відбувалася плавно, до селектору A слід додати властивість transition, значенням якого виступає час. Воно вказується звичайно в секундах або мілісекундах.
Приклад 1. Зміна кольору посилань
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір посилань</title>
<style>
a {
color: #008; /* Колір тексту */
background: #ffc; /* Колір фону */
padding: 2px; /* Поля навколо тексту */
transition: 1s linear; /* Час зміни */
}
a:hover {
color: #fff; /* Колір тексту */
background: #008; /* Колір фону */
}
</style>
</head>
<body>
<p>Для складання<a href="megadroid.html">мегадроїда</a> потрібно відкрити коробку, дістати мішечок з мікросхемами і скласти їх в потрібному порядку, користуючись нашою докладною 8631-сторінковою <a href="manual.html">інструкцією</a>.</p>
</body>
</html>
У даному прикладі для наочності обрані контрастні кольори і задано час переходу одна секунда. На робочому сайті час краще встановити менше, 0.6 s або близько того. Так що підбирайте значення за своїм смаком і бажанням.