Hvordan implementere sveve i CSS med eksempler



Denne artikkelen vil gi deg detaljert og omfattende kunnskap om hvordan du implementerer Hover i CSS med eksempler.

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?

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.





Hold markøren i CSS

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 com

Merk: Hallo

Ovennevnte kode tilpasser

,

og element og integrerer dem i en felles sveverfunksjon. Denne koden er designet for å endre tekstfargen til rød når musepekeren svever over dem. Komponenten h1 og h2 viser henholdsvis “CSS: Hover Test Code” og “Hover Red”. Avsnittelementet: Hover Test Red og anker tag: google.com blir uthevet i rødt når musepekeren svever over dem.

Å skape svevende opasitet på bilder

.pic {bredde: 1900px høyde: 1900px opacity: 1 filter: alpha (opacity = 100) bakgrunn: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacity: 0.2 filter: alpha (opacity = 30)}

Ovennevnte CSS-program viser modifiseringen av opasiteten til et bilde som svever. Den opprinnelige opasiteten til bildet er en Imidlertid er bruk av opasitets svevfilter det samme modifisert til 0,2. Denne koden viser at ved å bruke sveveelementet kan man endre opasiteten til et bilde og / eller tekst.

Opprette tekstoverlegg på bilder

.pic {bredde: 4000px høyde: 2170px bakgrunn: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {bredde: 3400px høyde: 2170px bakgrunn: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Orange er en fiber rik frukt. Antioksidanter som er tilstede i en appelsin kan hjelpe til med fordøyelsen, få huden til å gløde og fungere som et anti-aldringselement.

Tekstlagdeling i CSS sveve er et effektivt verktøy for å legge inn den beskrivende teksten til bildet i selve bildet. Dette verktøyet hjelper deg med å gi en kompakt oversikt over bildet uten å ta sovende plass i begrenset webdesignareal. I denne koden er bakgrunnsbildet innebygd med en beskrivende tekst som vises når musepekeren svever over teksten.



Dette avslutter alle viktige aspekter ved sveve i CSS og fremhever dets brukervennlighet i nettutvikling. Det er mange spesialeffekter som det kan føre til websidene våre. Vi kan alltid prøve forskjellige kombinasjoner av svevervelgeren med andre CSS-egenskaper som animasjon, bakgrunnsbilder, hyperkoblinger osv. Og utforske potensialet som vi så i noen av eksemplene våre. Til slutt er CSS en av de kraftigste måtene å designe og transformere nettsider på, og det er derfor nært forestående for webutviklere å tilegne seg denne ferdigheten for å bygge dynamiske websider.

inngangsnivå python utvikler CV

Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.

Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet til 'Hold markøren i CSS' -bloggen, så kommer vi tilbake til deg.