Розділ 2 · Завдання 12

Наведення миші (:hover)

Робимо сторінку живою — стиль, який діє, поки курсор наведений на елемент.

Завдання

Додайте в style.css:

style.css

.btn:hover {
  background-color: #004c99;
}

.mini-card:hover {
  background-color: #b8ddff;
}

Як це читати

.btn:hover { ... } — двокрапка й слово hover одразу після селектора означає «стиль тільки поки курсор наведений». Прибрав мишку — все повернулось до звичайного вигляду.

Спробуй

Онови браузер, наведи мишку на кнопку «Надіслати» — вона потемніє. Наведи на будь-яку картку — вона теж змінить колір.

Порада: плавний перехід

Додай у .btn ще одну властивість, щоб зміна кольору була плавною, а не миттєвою:

transition: background-color 0.3s;

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща