Cascading Style Sheets (CSS) er designet med eller XML (inkludert XHTML, SVG) format. Det er et stilark-språk som primært brukes til å beskrive elementer gjennom en mangfoldig serie formateringsmetoder. En av metodene svever, og i denne artikkelen vil vi forstå Hover i CSS på følgende måte:
- Hva er sveve i CSS?
- Hvor brukes hover?
- Hva gjør Hover?
- Kompatibilitet
- Hvordan virker det?
- Hold markøren over bakgrunnsfargeskift til “rød”
- Å skape svevende opasitet på bilder
- Opprette tekstoverlegg på bilder
Hva er sveve i CSS?
CSS svever er en velgerkomponent som brukes til å style forskjellige elementer når musepekeren svever over dem. De kan brukes på nesten alle HTML-elementer. Svevefunksjonen i CSS har betydelig betydning i utformingen av websider.
Svevkomponenten kan markere, kode og tilpasse websider i henhold til brukerens preferanser i et kompakt og effektivt webdesignprogram.
Hvor brukes hover?
De vanligste eksemplene på levedyktigheten til sveverfunksjonen kan fremheves på store shoppingnettsteder som Flipkart og Amazon. Når brukere holder markøren på et hvilket som helst produkt på disse e-handelsnettstedene, er produktet programmert til å utføre en automatisk zoom-sveverfunksjon for å gi kunden bedre oversikt over de valgte produktene. Gjennom denne programmeringen er websiden designet for å vise en kompakt oversikt over hele produktserien, ledsaget av en detaljert oversikt over produktet som er interessert i en enkelt webside-design.
Hva gjør Hover?
Sveveren er et multifunksjonelt programmeringsverktøy der brukeren kan tilpasse målelementet med et uendelig antall formateringskriterier. Noen forekomster av den operasjonelle kunnskapen til sveverfunksjonen inkluderer:
- Endre bakgrunn / skriftfarge
- Legge inn skjult tekst som vises på sveveren
- Lag overgangseffekter på bilder
- Automatisert zoom på tekst / bilder
- Endre bildens opasitet
- Innbygging av tekst
- Bildebytte
- Div. Sveve
- Flere andre CSS-sveverformateringsoperasjoner.
Hover-effekten endrer i utgangspunktet eiendomsverdien til et element for å aktivere animasjoner av endringer i en oppgitt tekst / bilde eller respektive elementer. Innbyggingen av CSS-sveverelementene i en nettsidesign forvandler en vanlig webside til en interaktiv, robust og svært funksjonell webside. Disse nettsidedesignene er brukervennlige og omfattende. Svevdesignede websider inneholder en høyere forbrukerappell, og de lokker varselet fra potensielle kunder.
Kompatibilitet med sveve i CSS
Svevefunksjonen er kompatibel med alle større nettlesere. Imidlertid er implementeringen av dette elementet på berøringsenheter fortsatt en utfordrende oppgave. Sveven i CSS muliggjør innholdstilgjengelighet på enheter som ikke støtter svevfunksjoner. Det er observert at en aktivert sveverfunksjon på den ikke-støttende enheten kan sette seg fast på enheten.
Derfor blir den viktige visningen av viktig innhold blokkert gjennom formateringsproblemet. På den ene siden der sveveelementet i CSS-programmet bidrar til et stort nivå av effektiv personalisering til websider omvendt, er dets brukervennlighet svært sovende. Når du kapitulerer til omstendighetene der informasjonsteknologiverden vokser betydelig mobil, risikerer sveverfunksjonen å bli foreldet med teknologiske fremskritt. Derfor er behovet for å lage en bærbar innebygd funksjon som fungerer med berørings- og mobile enheter ekstremt avgjørende.
Hvordan fungerer Hover i CSS?
Den aktive pseudoklassestilen er dominerende i CSS-sveverformatering, og den overstyrer alle / alle påfølgende lenker som blir fulgt av denne pseudoklassen. For eksempel i pseudoklasse “: lenke: besøkt, eller: aktiv, må regelen for hover plasseres etter: lenke og: besøkt, men før: aktiv for passende: sveverstil. LVHA-ordren:: lenke,: svever,: besøkt, og: aktiv brukes som referanse for riktig: svever formateringsstil.
div {bakgrunnsfarge: grønn polstring: 18px skjerm: ingen} span: hover + div {display: block}Hover Test!Skjult kode vises når du holder markøren
I den ovennevnte koden blir spennelementet modifisert for å slå sammen sveve- og div-elementet ved å bruke span: hover + div-element. Span-elementet som vises på den primære destinasjonssiden, viser teksten 'Svevetest!' Videre sveving på spennelementet avslører div-elementet 'Skjult kode vises på sveve'. Dette innebygde formatet fungerer på både tekst og bilder.
Hold markøren over bakgrunnsfargeendring til “rød”
p: sveve, h1: sveve, a: sveve {bakgrunnsfarge: rød}Hold markøren rød
Hold markøren rød
Lenker:
Hover Test Red:
Google comMerk: Hallo
Ovennevnte kode tilpasser
,