Što je CSS Hover?

Selektor :hover u CSS-u primjenjuje stilove na element dok kursor lebdi iznad njega. Često se koristi za stvaranje interaktivnih efekata ili za privlačenje pozornosti na elemente kada se s njima stupa u interakciju.

Element možete ciljati pomoću selektora :hover koristeći naziv oznake, klasu ili ID.

Na primjer:

java virtualni stroj

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

Boja pozadine u prethodnom primjeru postat će crvena (#ff0000) kada korisnik prijeđe pokazivačem iznad elementa s klasom 'button', dok će boja teksta postati bijela (#ffffff).

Različiti efekti lebdenja mogu se proizvesti kombiniranjem selektora :hover s drugim CSS elementima kao što su veličina fonta, obrub ili transformacija. To je moćan alat za poboljšanje vizualnih povratnih informacija i interaktivnosti vaše web stranice ili aplikacije.

Sintaksa:

 :hover { css declarations; } 

Uzmimo nekoliko primjera za razumijevanje lebdenja pomoću CSS-a:

Primjer 1:

HTML kôd:

 Hover Me 

CSS kod:

java dobiva trenutni datum

 .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; } 

Obrazloženje:

U gornjem primjeru imamo gumb s gumbom za lebdenje klase. Početne kombinacije boja gumba su svijetlosiva pozadina (#eaeaea) i tamnosivi tekst (#333333). Kada mišem prijeđete iznad gumba, boja pozadine se mijenja u crvenu (#ff0000), a boja teksta u bijelu (#ffffff).

Uz trajanje od 0,3 sekunde i funkciju jednostavnog mjerenja vremena, svojstvo prijelaza u klasi lebdećeg gumba osigurava fluidan prijelaz za promjenu boje pozadine kada miš lebdi iznad gumba.

Ostali elementi, kao što su veze ( ), slike ( ), divs ( ) ili bilo koji drugi element koji želite učiniti interaktivnim, može koristiti slične efekte lebdenja. Možete stvoriti različite efekte lebdenja prilagođene vašim potrebama dizajna mijenjanjem svojstava i vrijednosti unutar selektora :hover.

Primjer 2: efekt zumiranja slike

HTML kôd:

CSS kod:

java petlje

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

Primjer 3: Efekt podcrtavanja veze

HTML kôd:

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

CSS kod:

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

Značajka lebdenja u CSS-u

Interaktivnost i vizualne efekte svojih web stranica možete poboljšati korištenjem značajke CSS:hover koja nudi niz prednosti i značajki. Slijede neke bitne CSS značajke lebdenja:

Interaktivni učinak:Interaktivni efekti mogu se proizvesti mijenjanjem izgleda elemenata kada se iznad njih zadrži pomoću selektora :hover. Dok korisnici stupaju u interakciju s vašim sadržajem, možete mijenjati svojstva kao što su boja pozadine, boja teksta, neprozirnost, sjena okvira, transformacija i više kako biste im prikazali vizualnu povratnu informaciju.Ciljanje više elemenata:Možete odabrati više elemenata na stranici pomoću selektora :hover. To znači da možete dizajnirati standardizirane efekte lebdenja za različite elemente, uključujući gumbe, veze, slike, navigacijske izbornike i bilo koji drugi element koji želite učiniti interaktivnim.Podrška za prijelaze i animacije:Selektor :hover može se koristiti s CSS prijelazima i animacijama za stvaranje glatkih, estetski ugodnih efekata. Definiranjem svojstava prijelaza ili animacije možete navesti trajanje, funkciju mjerenja vremena i druge postavke povezane s animacijom da regulirate način na koji se stilovi mijenjaju kada se iznad elementa postavi pokazivač.Dodavanje dodatnih birača:Selektor :hover može se koristiti s drugim CSS selektorima za fokusiranje na određene elemente ili primjenu stilova prema unaprijed definiranim kriterijima. Na primjer, možete stvoriti jedinstvene i prilagođene efekte lebdenja kombiniranjem selektora :hover sa selektorima klasa, ID selektorima ili pseudoelementima.Podržava pristupačnost:Prilikom razvoja efekata lebdenja treba uzeti u obzir pristupačnost. Korisnici pomoćnih tehnologija koji koriste kursor, kao što su čitači zaslona, ​​možda neće imati pristup efektu lebdenja. Zbog toga se savjetuje provjeriti je li primarna funkcija ili sadržaj još uvijek čitljiv i upotrebljiv bez efekata lebdenja.Podrška za više preglednika:Većina modernih web preglednika podržava značajku CSS: hover. To je komponenta CSS specifikacije kompatibilna s većinom korištenih preglednika, uključujući Chrome, Firefox, Safari, Edge i druge. To osigurava dosljednost u izgledu i ponašanju na različitim platformama.