Atrybut :Hover - style CSS

Wprowadzenie: Czym jest :hover?

W CSS istnieją tzw. pseudoklasy, które pozwalają stylizować elementy w zależności od ich stanu. :hover to najpopularniejsza z nich. Aktywuje się ona w momencie, gdy użytkownik przesunie kursor myszy nad dany element.

Zastosowanie:

• Podświetlanie przycisków.

• Zmiana koloru linków.

• Wyświetlanie ukrytego tekstu lub menu.

• Efekty powiększania zdjęć.

Przykład praktyczny

Poniżej znajduje się kod prostego przycisku, który zmienia kolor tła oraz delikatnie się powiększa po najechaniu myszką.

<button class=”btn-demo”>Najedź na mnie!</button>

.btn-demo {
background-color: #3498db;
color: white;
padding: 15px 32px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
/* transition sprawia, że zmiana nie jest gwałtowna, ale płynna */
transition: all 0.3s ease;
}

/* Stan po najechaniu myszką */
.btn-demo:hover {
background-color: #2980b9;
transform: scale(1.1); /* Powiększenie o 10% */
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

Zadanie: „Interaktywna Galeria Kart”

Cel zadania: Stworzenie trzech kart informacyjnych (np. o różnych językach programowania lub podzespołach komputerowych), które reagują na kursor użytkownika.

Instrukcja dla ucznia:

1. Struktura HTML:

   • Stwórz kontener <div> o klasie gallery.

   • Wewnątrz umieść trzy mniejsze kontenery <div> o klasie card.

   • Każda karta powinna zawierać nagłówek <h3>, krótki opis w <p> oraz link <a> udający przycisk.

2. Stylizacja podstawowa (CSS):

   • Ustaw kartom obramowanie (border), zaokrąglone rogi (border-radius) oraz marginesy.

   • Nadaj przyciskom (linkom) dowolny kolor tła.

3. Dodanie interakcji (:hover):

   • Karta: Po najechaniu na całą kartę, niech zmieni się jej kolor obramowania lub tła.

   • Przycisk: Po najechaniu na link wewnątrz karty, niech zmieni on swój kolor na jaskrawy, a tekst stanie się pogrubiony.

   • Transformacja: Dodaj efekt transform: translateY(-10px); dla karty, aby sprawić wrażenie, że karta „unosi się” po najechaniu.

Kod pomocniczy (Szkielet):

<div class=”gallery”>
<div class=”card”>
<h3>Procesor (CPU)</h3>
<p>Mózg każdego komputera, odpowiedzialny za obliczenia.</p>
<a href=”#” class=”more-link”>Czytaj więcej</a>
</div>
</div>

Co należy zapamiętać:

• Składnia: selektor:pseudoklasa { właściwość: wartość; }

• Brak spacji: Między selektorem a dwukropkiem nie może być spacji (np. button:hover jest poprawne, button :hover oznacza coś innego).

• Transition: Aby efekt był profesjonalny, zawsze warto dodać właściwość transition do głównego elementu (nie do :hover), co nada animacji płynność.

Przykład ukończenia zadania: