Co to jest CSS Hover?

Selektor :hover w CSS stosuje style do elementu, gdy kursor znajduje się nad nim. Często wykorzystuje się go do tworzenia efektów interaktywnych lub do zwracania uwagi na elementy, z którymi wchodzi się w interakcję.

wyrażenie regresji w Javie

Możesz wybrać element za pomocą selektora :hover, używając jego nazwy tagu, klasy lub identyfikatora.

Na przykład:

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Kolor tła w poprzednim przykładzie zmieni kolor na czerwony (#ff0000), gdy użytkownik najedzie kursorem na element z przyciskiem klasy, a kolor tekstu zmieni się na biały (#ffffff).

Łącząc selektor :hover z innymi elementami CSS, takimi jak rozmiar czcionki, obramowanie lub transformacja, można uzyskać różne efekty najechania. Jest to potężne narzędzie do ulepszania wizualnej informacji zwrotnej i interaktywności witryny lub aplikacji.

Składnia:

 :hover { css declarations; } 

Weźmy kilka przykładów, aby zrozumieć najechanie kursorem za pomocą CSS:

Przykład 1:

Kod HTML:

 Hover Me 

Kod CSS:

przekonwertuj znak na int Java

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Wyjaśnienie:

W powyższym przykładzie mamy przycisk z przyciskiem najechania na klasę. Początkowe kombinacje kolorów przycisku to jasnoszare tło (#eaeaea) i ciemnoszary tekst (#333333). Po najechaniu myszką na przycisk kolor tła zmienia się na czerwony (#ff0000), a kolor tekstu na biały (#ffffff).

Przy czasie trwania wynoszącym 0,3 sekundy i funkcji ułatwiającej synchronizację, właściwość przejścia w klasie przycisku najechania kursorem zapewnia płynne przejście w przypadku zmiany koloru tła po najechaniu myszką na przycisk.

10 procent z 60

Inne elementy, takie jak linki ( ), obrazy ( ), div ( ) lub dowolny inny element, który chcesz uczynić interaktywnym, może używać podobnych efektów najechania myszką. Możesz tworzyć różne efekty najechania dostosowane do potrzeb projektu, zmieniając właściwości i wartości w selektorze :hover.

Przykład 2: efekt powiększenia obrazu

Kod HTML:

Kod CSS:

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Przykład 3: Efekt podkreślenia łącza

Kod HTML:

 <a href="#">Hover Me</a> 

Kod CSS:

kod Fibonacciego w Javie

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Funkcja Hover w CSS

Możesz poprawić interaktywność i efekty wizualne swoich stron internetowych, korzystając z funkcji CSS:hover, która oferuje wiele korzyści i funkcji. Oto kilka podstawowych funkcji najechania kursorem CSS:

Efekt interaktywny:Efekty interaktywne można uzyskać, zmieniając wygląd elementów po najechaniu myszką za pomocą selektora :hover. Gdy użytkownicy wchodzą w interakcję z Twoją treścią, możesz zmieniać właściwości, takie jak kolor tła, kolor tekstu, krycie, cień ramki, transformacja i inne, aby pokazać im informację wizualną.Kierowanie na wiele elementów:Za pomocą selektora :hover możesz wybrać wiele elementów na stronie. Oznacza to, że możesz zaprojektować ustandaryzowane efekty najechania myszką dla różnych elementów, w tym przycisków, łączy, obrazów, menu nawigacyjnych i wszelkich innych elementów, które chcesz uczynić interaktywnymi.Obsługa przejść i animacji:Selektora :hover można używać z przejściami CSS i animacjami, aby uzyskać eleganckie, estetyczne efekty. Definiując właściwości przejścia lub animacji, możesz określić czas trwania, funkcję synchronizacji i inne ustawienia związane z animacją, aby regulować sposób zmiany stylów po najechaniu kursorem na element.Dodawanie dodatkowych selektorów:Selektora :hover można używać z innymi selektorami CSS, aby skupić się na określonych elementach lub zastosować style według wcześniej zdefiniowanych kryteriów. Na przykład możesz stworzyć unikalne i dostosowane efekty najechania myszką, łącząc selektor :hover z selektorami klas, selektorami ID lub pseudoelementami.Wspieranie dostępności:Przy opracowywaniu efektów najechania należy wziąć pod uwagę dostępność. Użytkownicy technologii wspomagających korzystających z kursora, takich jak czytniki ekranu, mogą nie mieć dostępu do efektu najechania kursorem. Z tego powodu zaleca się sprawdzenie, czy podstawowa funkcjonalność lub treść jest nadal czytelna i użyteczna bez efektu najechania kursorem.Obsługa różnych przeglądarek:Większość nowoczesnych przeglądarek internetowych obsługuje funkcję CSS: hover. Jest to komponent specyfikacji CSS zgodny z większością powszechnie używanych przeglądarek, w tym Chrome, Firefox, Safari, Edge i innymi. Zapewnia to spójność wyglądu i zachowania na różnych platformach.