Переходи з використанням :hover

9 червня 2022 р.896

При використанні псевдокласу :hover зміна стилю, наприклад, кольору фону відбувається миттєво. Для плавної зміни властивостей призначені переходи, які робляться за допомогою властивості transition — воно дозволяє задати тривалість та метод переходу.

Для початку розглянемо простий приклад, коли плавно змінюється колір посилань при наведенні курсору.

a { color: green; transition: 1s; } 
a:hover { color: red; }

Спершу задаємо вихідний колір посилань за допомогою властивості color, додаючи його до селектора A. Там же вставляємо властивість transition зі значенням часу переходу, зокрема, 1s це одна секунда. Нижче створюємо стильові правила із псевдокласом :hover, які будуть застосовуватися до посилань при наведенні на них курсору миші. Тепер зміна кольору посилань із червоного на зелений, і навпаки, відбуватиметься плавно протягом однієї секунди. Щоб встановити час переходу, просто поміняйте значення transition (приклад 1). Можна вставляти дробові числа (0.8s) або мілісекунди (800ms), пам'ятаючи, що в одній секунді тисяча мілісекунд (1s = 1000ms).

Приклад 1. Плавна зміна кольору посилань

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover</title> <style> a { color: green; /* Колір посилань */
transition: 0.5s; /* Час переходу */
} 
a:hover { color: red; /* Колір посилання при наведенні */
}
</style>
</head>
<body> <p><a href="#">Uno</a> | <a href="#">Dos</a> | <a href="#">Tres</a></p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Зміна кольору посилання при наведенні

Мал. 1. Зміна кольору посилання при наведенні

Переходи можна додавати не лише до текстових посилань, але й до інших елементів веб-сторінки. У поєднанні з властивістю transform, що задає трансформацію, це дозволяє робити різні ефекти. У прикладі 2 показаний блок <div> з картинкою всередині, при наведенні на яку картинка збільшується в масштабі. Для цього у стилях <div> використовуємо властивість overflow зі значенням hidden , щоб зображення при збільшенні не виходило за межі блоку. До img додаємо властивість transition, а для img:hover задаємо властивість transform.

Приклад 2. Масштабування зображення при наведенні

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover</title> <style> div { display: inline-block; /* Рядково-блоковий елемент */
overflow: hidden; /* Обрізаємо вміст за межами блоку */
} 
div img { display: block; /* Забираємо відступ знизу */
transition: 1s; /* Перехід 1 секунда */
} 
div img:hover { transform: scale(1.2); /* Збільшуємо картинку */
}
</style>
</head>
<body> <div><img src="image/squirrel.jpg" alt="Білка"></div>
</body>
</html>

Результат цього прикладу показаний на рис. 2.

Збільшення картинки при наведенні

Мал. 2. Збільшення картинки при наведенні

Тут застосовується рядково-блоковий елемент, щоб розміри <div> відповідали вставленій в нього картинці. У зображень усередині блоків з'являється невеликий відступ знизу, прибираємо його за допомогою властивості display, додаючи його до селектора img.

Див. також