Selektor nachylenia jest częścią pseudoklasy. Efekt ten służy do stylizowania zawartości w HTML, gdy kursor myszy unosi się nad nimi. Możemy zastosować ten efekt do dowolnego elementu. Ten artykuł zawiera podstawowe użycie klasy zawisowej w HTML i CSS.

Cel efektu zawisowego

W dowolnym dokumencie lub przeglądarce używamy linków do stron internetowych do pomocy użytkownika. W tym celu możemy stylizować linki do stron, które nie są jeszcze odwiedzane za pomocą klasy selektora linków. Podobnie w przypadku tych linków, które są już odwiedzane, używamy odwiedzanego selektora. Aktywny selektor służy do aktywnych linków. To są wszystkie style linków, które pokazują wpływ na nachylenie. Jeśli łącze i selektor odwiedzanych linków są obecne w definicji CSS, używamy klasy selektora najemnika, aby zobaczyć wynikowy efekt.

Z drugiej strony, ilekroć chcemy unosić się na dowolnym elemencie w HTML, powoduje to pewne efekty za pomocą niektórych właściwości w CSS, zarówno na istniejącej zawartości lub na nowej formie w wyniku zawisu.

Składnia elementu zawieszonego

Content_of_html: Hover
// zadeklaruj kod lub efekty CSS, które chcesz zastosować.

Przykład 1: Poduszka zmienia kolor tekstu

Ten przykład dotyczy transformacji tekstu, gdy przesuwamy kursor myszy. Możemy zastosować kilka warunków do tekstu. Ale na razie dwie następujące podstawowe zmiany to: zmiana koloru tekstu, w którym zastosowano zawód.

Począwszy od sekcji HTML, użyj znacznika stylu, ponieważ robimy styl wewnętrzny. Użyj sekcji stylu wewnątrz znacznika. Klasa zawisowa służy do zastosowania wszystkich efektów na tekście nagłówka. Tak więc H1 jest używany z klasą zawisową.

H1: Hover
Kolor biały;
Kolor tła: fioletowy;

Dwie nieruchomości, jak omówiliśmy wcześniej, są stosowane. Domyślnie kolor nagłówka jest czarny, a kolor tła strony jest biały. Ale na zawisie kolor tła tej określonej części staje się fioletowy, więc kolor tekstu również zmienia się w biały.

Kod HTML CSS:

Zamknij tag stylu i sekcję HTML. Przechodząc w kierunku części ciała, ogłoszono nagłówek1. Wyrównanie nagłówek1

jest ustawiony na centrum. Zamknij wszystkie tagi i zapisz plik edytora tekstu. Aby wykonać dane wyjściowe, musimy uruchomić plik w przeglądarce. Podczas zapisywania pliku należy pamiętać o jednej rzeczy: zapisz plik z rozszerzeniem HTML zamiast zapisywać go z rozszerzeniem tekstu. Otwórz za pomocą domyślnej przeglądarki, aby uzyskać wyjście.

Wyjście:
Video gracze.com/WP-content/uploads/2022/06/video2.MP400: 0000: 0000: 10 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Dane wyjściowe w przeglądarce jest przechwytywane w postaci kilku sekundów, które prowadzi do nadmiaru wyświetlania wyników. Po wykonaniu pliku zobaczysz, że pojawia się prosty nagłówek na środku strony internetowej. Kiedy bierzemy kursor blisko nagłówka lub nagłówka nad nagłówkiem, kolor tła i kolor czcionki są zmieniane. Ilekroć kursor zostaje cofnięty, wraca do domyślnego.

Przykład 2: Hover buduje blok z tekstem

W przeciwieństwie do poprzedniego przykładu, w którym istniejący tekst został zmieniony na zawisie, w tym przykładzie dodano nową zawartość (blok) HTML, który jest pokazany tylko wtedy. Ten blok ma również pewne wymiary i specyfikacje. Rozwińmy procedurę.

Począwszy od sekcji CSS, jesteśmy Div. Ta div tworzy blok treści, który jest wynikiem unoszenia się nad tekstem. Szerokość i wysokość to dwie podstawowe wartości zastosowane w celu utworzenia dowolnego kształtu w HTML. Dalej jest nieruchomość wyściółka. Jest to obszar odległości zawartości wewnątrz bloku lub kształtu. Na przykład wzięliśmy tekst wewnątrz bloku, więc odległość tekstu i granica kształtu są traktowane jako wyściółka. Jeśli używana jest tylko wyściółka, oznacza to, że jest to odległość wewnątrz pudełka z każdej strony. Jeśli wyściółka jest wykonywana z określonej strony, ponieważ użyliśmy wyściółki z prawej, oznacza to, że jest to odległość po prawej stronie. Ta właściwość utrzymuje tekst wewnątrz granicy bloku. W przeciwnym razie istnieją szanse na przekroczenie tekstu z granicy bloku.

Wyściółka: 20px;
PRAWADNIE: 50px;

Ten efekt wyściółki jest stosowany w celu wyrównania zawartości wewnętrznej do zawartości zewnętrznej. Wartość jest pobierana w pikselach.

Kod CSS:

Rozmiar czcionki i kolor czcionki tekstu są nakładane do tekstu wewnątrz bloku. Kolejna sekcja stylu dotyczy nagłówka, które zastosowaliśmy na zawisie. Ponieważ blok treści jest tworzony w Div, Div jest zawarty razem w tego typu stylizacja. Tworzona jest zawartość kształtu bloku, który jest wymieniony w celu utworzenia wyświetlacza.

H3: Hover + div
Blok wyświetlacza;

Następnie zamknij styl i znaczniki głowy. Zadeklaruj nagłówek wewnątrz ciała HTML. Utworzono DIV. Tekst, który zostanie wymieniony w bloku, jest również zapisywany wewnątrz tagów Div. Zamknij tag ciała.

Kod nadwozia HTML:

Zapisz kod w pliku i uruchom go w przeglądarce. Jako wyjście poprzedniego kodu, wzięliśmy niewielką część filmu, aby opracować działanie klasą zawisową, która jest tworzona i zaprojektowana do utworzenia bloku z tekstem wewnątrz bloku.

Wyjście:
Video gracze.com/WP-content/uploads/2022/06/video3.MP400: 0000: 0000: 13 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Wideo pokazuje, że prosty tekst jako nagłówek jest wyświetlany podczas uruchamiania pliku w przeglądarce. Ale kiedy unosimy się nad tekstem, powoduje to zmianę na stronie internetowej. Na zawisie tekst nagłówka pozostaje taki sam, jak w momencie wykonania. Ale blok po lewej stronie strony jest tworzony za każdym razem, gdy przesuwamy kursor w kierunku nagłówka. Kiedy odsuwamy kursor od nagłówka, blok znika. Wynika to z faktu, że klasa zawisowa tworzy w niej blok i tekst. Wszystkie wpływ na blok i tekst jest stosowany w CSS.

Wniosek

CSS Ever to właściwość używana do wyróżnienia lub podkreślenia zawartości HTML, gdy przesuwamy kursor do nich. Ta funkcja służy głównie do powiadomienia o czymś. W tym artykule wyjaśniliśmy działanie klasy zawisowej i sposób przekształcania zawartości HTML w najemniku. Na początku przedstawiliśmy krótki przegląd klasy najemnika. Wdrożyliśmy dwa podstawowe przykłady efektu zawisowego. Pierwszy przykład zawiera wpływ na istniejący tekst, podczas gdy drugim przykładem jest pokazanie dodatkowego kształtu unoszącego się w kierunku istniejącego tekstu, podczas gdy istniejący tekst pozostaje taki sam.