Celem tego podręcznika jest zbadanie, jak zmienić obraz po najechaniu kursorem za pomocą CSS. Zacznijmy więc!
Co to jest :hover w CSS?
:hover to element pseudoklasy używany do zmiany stanu elementów HTML, gdy mysz go uruchomi. Ten selektor CSS jest używany głównie do stylizowania lub wybierania elementów. Nie można go jednak zastosować do łączy.
Składnia
Składnia :hover jest podana poniżej:
element : unosić się {
Kod CSS. . .
}
Tutaj, ' element ” odnosi się do elementu, w którym chcesz zastosować efekt najechania.
Teraz przejdziemy do praktycznego przykładu zmiany obrazu po najechaniu kursorem za pomocą CSS.
Przykład: Jak zmienić obraz po najechaniu za pomocą CSS?
Aby najpierw zmienić obraz po najechaniu myszą, dodaj dwa obrazy w sekcji HTML. Pierwszy obraz dotyczy stanu aktywnego, a następny stanu najechania.
Krok 1: Dodaj obrazy
W określonym celu dodamy dwa obrazy „ obraz1 ' oraz ' obraz2 ” i przypisz nazwę klasy do drugiego obrazu jako „ hover_img ”.
HTML
< ciało >< div klasa = 'obraz' >
< obrazek src = 'obraz1.png' >
< obrazek src = 'obraz2.png' klasa = „hover_img” >
< / div >
< / ciało >
Krok 2: Stylizuj obrazy
Teraz przejdź do CSS, aby ustawić pozycję obu obrazów za pomocą „ pozycja ' własność. Ustawimy jego pozycję jako „ absolutny ”, aby umieścić go bezwzględnie w odniesieniu do najbliższego rodzica.
CSS
.img {pozycja : absolutny ;
}
To pokaże następujący wynik:
W następnym kroku ustawimy drugi obraz przed pierwszym. W tym celu ustawimy pozycję obrazu jako „ absolutny ” i ustaw górną i lewą pozycję jako „ 0 ”. Używając tego obrazu umieszczamy go przed pierwszym obrazem, ale chcemy wyświetlić drugi obraz po najechaniu na niego myszą. Tak więc, ustawiając wyświetlaną wartość jako „ Żaden ” pokaże pożądany wynik:
.hover_img {pozycja : absolutny ;
Top : 0 ;
lewy : 0 ;
wyświetlacz : Żaden ;
}
Wynik podanego kodu wygląda następująco:
Drugi obraz został pomyślnie ukryty za pierwszym obrazem.
Teraz przejdź do następnego kroku.
Krok 3: Zmień obraz po najechaniu kursorem
Następnie użyj „ :unosić się ” i wybierz „ .img ”, aby zastosować wskaźnik myszy do wybranego elementu. Następnie przypisz nazwę klasy do drugiego obrazu „ .hover_img ”. Następnie w nawiasach ustaw wartość właściwości wyświetlania jako „ wbudowany ”, co zmusi element do zmieszczenia się w tej samej linii:
.img : unosić się .hover_img {wyświetlacz : wbudowany ;
}
Oto wynik, który pokazuje, że obraz zmienia się, gdy użytkownik najedzie na niego kursorem:
Powyższe dane wyjściowe wskazują, że pomyślnie zmieniliśmy obraz po najechaniu kursorem za pomocą CSS.
Wniosek
Obraz można zmienić po najechaniu kursorem za pomocą „ :unosić się ” element pseudoklasy. Aby to zrobić, dodaj wymagane obrazy w pliku HTML, ustaw je w tej samej pozycji za pomocą CSS i zastosuj na nich selektor :hover. W rezultacie pierwszy obraz zmieni się po najechaniu na niego. W tym artykule wyjaśniliśmy, jak zmienić obraz po najechaniu kursorem, używając :hover na praktycznym przykładzie.