Rozdział 2 · Zadanie 12

Najechanie myszką (:hover)

Ożywiamy stronę — styl, który działa, dopóki kursor jest nad elementem.

Zadanie

Dodaj do style.css:

style.css

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

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

Jak to czytać

.btn:hover { ... } — dwukropek i słowo hover zaraz po selektorze oznacza «styl tylko wtedy, gdy kursor jest nad elementem». Zabrałeś mysz — wszystko wraca do normalnego wyglądu.

Spróbuj

Odśwież przeglądarkę, najedź myszką na przycisk «Wyślij» — pociemnieje. Najedź na dowolną kartę — też zmieni kolor.

Wskazówka: płynne przejście

Dodaj do .btn jeszcze jedną właściwość, żeby zmiana koloru była płynna, a nie natychmiastowa:

transition: background-color 0.3s;

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska