Kaj je CSS Hover?

Izbirnik :hover v CSS uporabi sloge za element, medtem ko kazalec lebdi nad njim. Pogosto se uporablja za ustvarjanje interaktivnih učinkov ali za pritegnitev pozornosti na elemente, ko z njimi komunicirate.

Na element lahko ciljate z izbirnikom :hover z uporabo njegovega imena oznake, razreda ali ID-ja.

Na primer:

mylivecricket.

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

Barva ozadja v prejšnjem primeru bo postala rdeča (#ff0000), ko se uporabnik premakne nad element z razredom 'button', medtem ko bo barva besedila postala bela (#ffffff).

Različne učinke lebdenja lahko ustvarite s kombiniranjem izbirnika :hover z drugimi elementi CSS, kot so velikost pisave, obroba ali preoblikovanje. Je močno orodje za izboljšanje vizualnih povratnih informacij in interaktivnosti vašega spletnega mesta ali aplikacije.

Sintaksa:

 :hover { css declarations; } 

Vzemimo nekaj primerov za razumevanje lebdenja z uporabo CSS:

Primer 1:

HTML koda:

 Hover Me 

Koda CSS:

konvencija o poimenovanju za javo

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

Pojasnilo:

V zgornjem primeru imamo gumb z lebdečim gumbom razreda. Začetne barvne kombinacije gumba so svetlo sivo ozadje (#eaeaea) in temno sivo besedilo (#333333). Ko miško premaknete nad gumb, se barva ozadja spremeni v rdečo (#ff0000) in barva besedila v belo (#ffffff).

Lastnost prehoda v razredu lebdečih gumbov s trajanjem 0,3 sekunde in funkcijo enostavnega merjenja časa zagotavlja tekoč prehod za spremembo barve ozadja, ko miško premaknete nad gumb.

Drugi elementi, kot so povezave ( ), slike ( ), divs ( ) ali kateri koli drug element, ki ga želite narediti interaktivnega, lahko uporablja podobne učinke lebdenja. Ustvarite lahko različne učinke lebdenja, ki ustrezajo vašim potrebam oblikovanja, tako da spremenite lastnosti in vrednosti v izbirniku :hover.

Primer 2: učinek povečave slike

HTML koda:

Koda CSS:

indeks jave

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

Primer 3: Učinek podčrtaja povezave

HTML koda:

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

Koda CSS:

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

Funkcija Hover v CSS

Interaktivnost in vizualne učinke svojih spletnih strani lahko izboljšate s funkcijo CSS:hover, ki ponuja vrsto prednosti in funkcij. Sledi nekaj bistvenih funkcij CSS pri lebdenju:

Interaktivni učinek:Interaktivne učinke je mogoče ustvariti s spreminjanjem videza elementov, ko nanje premaknete miškin kazalec z uporabo izbirnika :hover. Ko uporabniki komunicirajo z vašo vsebino, lahko spreminjate lastnosti, kot so barva ozadja, barva besedila, motnost, senčenje polja, preoblikovanje in druge, da jim prikažete vizualne povratne informacije.Ciljanje na več elementov:Z izbirnikom :hover lahko izberete več elementov na strani. To pomeni, da lahko oblikujete standardizirane učinke lebdenja za različne elemente, vključno z gumbi, povezavami, slikami, navigacijskimi meniji in vsemi drugimi elementi, ki jih želite narediti interaktivne.Podpora za prehode in animacije:Izbirnik :hover lahko uporabite s prehodi in animacijami CSS za ustvarjanje gladkih, estetsko prijetnih učinkov. Z definiranjem lastnosti prehoda ali animacije lahko določite trajanje, časovno funkcijo in druge nastavitve, povezane z animacijo, da regulirate, kako se slogi spremenijo, ko premaknete miškin kazalec na element.Dodajanje dodatnih izbirnikov:Izbirnik :hover lahko uporabite z drugimi izbirniki CSS, da se osredotočite na določene elemente ali uporabite sloge po vnaprej določenih kriterijih. Ustvarite lahko na primer edinstvene in prilagojene učinke lebdenja s kombiniranjem izbirnika :hover z izbirniki razredov, izbirniki ID-jev ali psevdoelementi.Podpora za dostopnost:Pri razvoju učinkov lebdenja je treba upoštevati dostopnost. Uporabniki podpornih tehnologij, ki uporabljajo kazalec, kot so bralniki zaslona, ​​morda ne bodo imeli dostopa do učinka lebdenja. Zaradi tega je priporočljivo preveriti, ali je primarna funkcionalnost ali vsebina še vedno berljiva in uporabna brez učinkov lebdenja.Podpora za več brskalnikov:Večina sodobnih spletnih brskalnikov podpira funkcijo CSS: hover. Je komponenta specifikacije CSS, ki je združljiva z večino razširjenih brskalnikov, vključno s Chromom, Firefoxom, Safarijem, Edgeom in drugimi. To zagotavlja doslednost videza in obnašanja na različnih platformah.