Jak zmienić obraz na zawisie za pomocą CSS

Elinging to technika wykorzystująca urządzenie wskazujące do interakcji z elementem. Można go używać do wyboru lub stylizowania różnych elementów CSS, takich jak przyciski, obrazy, menu i wiele innych. Zastosowanie zawisu na elemencie zmieni jego stan, gdy mysz wyzwala określone zdarzenie.

Celem tego podręcznika jest zbadanie sposobu zmiany obrazu na zawisie za pomocą CSS. Więc zacznijmy!

Co to jest: wuszona w CSS?

: Wather jest elementem pseudoklasy używanej do zmiany stanu elementów HTML, gdy uruchamia go mysz. Ten selektor CSS jest wykorzystywany przede wszystkim do stylu lub wyboru elementów. Nie można go jednak zastosować do linków.

Składnia

Składnia: zawieszki podano poniżej:

Element: Hover
Kod CSS…

Tutaj, "element„Odnosi się do elementu, w którym chcesz zastosować efekt najemnika.

Teraz przejdziemy do praktycznego przykładu zmiany obrazu na zawisie za pomocą CSS.

Przykład: Jak zmienić obraz na zawisie za pomocą CSS?

Aby najpierw zmienić obraz na wuszach, dodaj dwa obrazy w sekcji HTML. Pierwszy obraz dotyczy stanu aktywnego, a następny jest dla stanu osadu.

Krok 1: Dodaj obrazy

W określonym celu dodamy dwa obrazy „obraz1" I "obraz2”I przypisz nazwę klasy do drugiego obrazu jako„Hover_img".

Html

Krok 2: Stylowe obrazy

Teraz przejdź do CSS, aby ustawić pozycję obu obrazów za pomocą „pozycja" nieruchomość. Ustawimy jego pozycję jako „absolutny„Aby ustawić go absolutnie w odniesieniu do najbliższego rodzica.

CSS

.img
Pozycja: absolutna;

To pokaże następujący wynik:

W następnym kroku ustawym drugie zdjęcie przed pierwszym. Aby to zrobić, ustawimy pozycję obrazu jako „absolutny”I ustaw górną i lewą pozycję jako„0". Korzystanie z tego obrazu jest umieszczone przed pierwszym obrazem, ale chcemy wyświetlić drugi obraz, gdy myszy na nim zawisły. Tak więc ustawienie wartości wyświetlania jako „nic”Pokazuje pożądany wynik:

.HOVER_IMG
Pozycja: absolutna;
TOP: 0;
po lewej: 0;
Nie wyświetla się;

Wyjście danego kodu jest następujące:

Drugi obraz jest z powodzeniem ukryty za pierwszym obrazem.

Teraz przejdź do następnego kroku.

Krok 3: Zmień obraz na zawisie

Następnie użyj „:unosić się”I wybierz„.img„Aby zastosować nachylenie do wybranego elementu. Następnie przypisz nazwę klasy drugiego obrazu „.Hover_img". Następnie, wewnątrz nawiasów, ustaw wartość właściwości wyświetlania jako „Wline”, Który zmusi element do pasowania w tej samej linii:

.IMG: Włóż .HOVER_IMG
Wyświetl: Inline;

Oto wynik, który pokazuje, że obraz jest zmieniany, gdy unoszą się na nim użytkownika:

Powyższe dane wyjściowe wskazuje, że pomyślnie zmieniliśmy obraz na zawisie za pomocą CSS.

Wniosek

Obraz można zmienić na zawisie za pomocą „:unosić się„Element pseudokliczny. Aby to zrobić, dodaj wymagane obrazy w pliku HTML, ustaw je w tej samej pozycji za pomocą CSS i zastosuj na nich selektor:. W rezultacie pierwszy obraz się zmieni, gdy na nim unosi się. W tym artykule wyjaśniliśmy, jak zmienić obraz na zawisie za pomocą: Włóż z praktycznym przykładem.