Kas ir CSS Hover?

CSS atlasītājs :hover piemēro elementam stilus, kamēr kursors virzās virs tā. To bieži izmanto, lai radītu interaktīvus efektus vai pievērstu uzmanību elementiem, kad tie tiek mijiedarboti.

Varat atlasīt elementu, izmantojot :hover atlasītāju, izmantojot tā taga nosaukumu, klasi vai ID.

Piemēram:

pitonu šķirošanas korteži

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

Fona krāsa iepriekšējā piemērā kļūs sarkana (#ff0000), kad lietotājs virzīs kursoru virs elementa ar klases “pogu”, bet teksta krāsa kļūs balta (#ffffff).

Apvienojot :hover atlasītāju ar citiem CSS elementiem, piemēram, fonta lielumu, apmali vai transformāciju, var izveidot dažādus hover efektus. Tas ir spēcīgs rīks, lai uzlabotu vietnes vai lietojumprogrammas vizuālo atgriezenisko saiti un interaktivitāti.

Sintakse:

 :hover { css declarations; } 

Ņemsim dažus piemērus, lai saprastu kursora novietošanu, izmantojot CSS:

1. piemērs:

HTML kods:

 Hover Me 

CSS kods:

java swing apmācība

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

Paskaidrojums:

Iepriekš minētajā piemērā mums ir poga ar klases kursora pogu. Pogas sākotnējās krāsu kombinācijas ir gaiši pelēks fons (#eaeaea) un tumši pelēks teksts (#333333). Kad pele tiek virzīta virs pogas, fona krāsa mainās uz sarkanu (#ff0000) un teksta krāsa uz baltu (#ffffff).

Ar 0,3 sekunžu ilgumu un vieglas laika noteikšanas funkciju pārejas īpašība kursora pogu klasē nodrošina plūstošu pāreju fona krāsas maiņai, kad pele tiek virzīta virs pogas.

Citi elementi, piemēram, saites ( ), attēli ( ), divs ( ) vai jebkurš cits elements, kuru vēlaties padarīt interaktīvu, var izmantot līdzīgus kursora novietošanas efektus. Mainot rekvizītus un vērtības :hover atlasītājā, varat izveidot dažādus pārvietošanas efektus, kas piemēroti jūsu dizaina vajadzībām.

2. piemērs: attēla tālummaiņas efekts

HTML kods:

CSS kods:

salīdzināms interfeiss java

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

3. piemērs: Saites pasvītrojuma efekts

HTML kods:

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

CSS kods:

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

Kursora novietošanas funkcija CSS

Varat uzlabot savu tīmekļa lapu interaktivitāti un vizuālos efektus, izmantojot funkciju CSS:hover, kas piedāvā dažādas priekšrocības un funkcijas. Tālāk ir norādītas dažas būtiskas CSS kursora novietošanas funkcijas.

Interaktīvs efekts:Interaktīvus efektus var radīt, mainot elementu izskatu, kad tiek virzīts kursors virs, izmantojot :hover atlasītāju. Lietotājiem mijiedarbojoties ar jūsu saturu, varat mainīt tādus rekvizītus kā fona krāsa, teksta krāsa, necaurredzamība, lodziņa ēna, pārveidot un citus, lai parādītu viņiem vizuālu atgriezenisko saiti.Mērķauditorijas atlase pēc vairākiem elementiem:Varat atlasīt vairākus elementus lapā, izmantojot :hover atlasītāju. Tas nozīmē, ka varat izstrādāt standartizētus kursora efektus dažādiem elementiem, tostarp pogām, saitēm, attēliem, navigācijas izvēlnēm un jebkuram citam elementam, ko vēlaties padarīt interaktīvu.Pāreju un animāciju atbalsts::hover atlasītāju var izmantot ar CSS pārejām un animācijām, lai radītu gludus, estētiski pievilcīgus efektus. Definējot pārejas vai animācijas rekvizītus, varat norādīt ilgumu, laika funkciju un citus ar animāciju saistītus iestatījumus, lai regulētu stilu izmaiņas, kad virs elementa tiek virzīts kursors.Papildu atlasītāju pievienošana:Atlasītāju :hover var izmantot kopā ar citiem CSS atlasītājiem, lai koncentrētos uz konkrētiem elementiem vai piemērotu stilus saskaņā ar iepriekš noteiktiem kritērijiem. Piemēram, varat izveidot unikālus un pielāgotus pārvietošanas efektus, kombinējot :hover atlasītāju ar klases atlasītājiem, ID atlasītājiem vai pseidoelementiem.Pieejamības atbalsts:Izstrādājot lidināšanās efektus, jāņem vērā pieejamība. Palīgtehnoloģiju lietotājiem, kuri izmanto kursoru, piemēram, ekrāna lasītājus, var nebūt piekļuves kursora efektam. Tādēļ ir ieteicams pārbaudīt, vai galvenā funkcionalitāte vai saturs joprojām ir lasāms un lietojams bez kursora virzīšanas efektiem.Vairāku pārlūkprogrammu atbalsts:Lielākā daļa mūsdienu tīmekļa pārlūkprogrammu atbalsta CSS: hover funkciju. Tas ir CSS specifikācijas komponents, kas ir saderīgs ar visplašāk izmantotajām pārlūkprogrammām, tostarp Chrome, Firefox, Safari, Edge un citām. Tas nodrošina izskata un uzvedības konsekvenci dažādās platformās.