Hovervelgeren er en del av pseudoklassen. Denne effekten brukes til å style innholdet i HTML når musens markør svever over dem. Vi kan bruke denne effekten på ethvert element. Denne artikkelen inneholder noen grunnleggende bruk av en sveveklasse i HTML og CSS.

Formålet med sveveeffekten

I ethvert dokument eller nettleser bruker vi lenkene til nettsteder for brukeren fra brukeren. For dette formålet kan vi style lenkene for sidene som ennå ikke er besøkt ved å bruke koblingsvelgerklassen. Tilsvarende for de koblingene som allerede er besøkt, bruker vi den besøkte velgeren. En aktiv velger brukes til de aktive koblingene. Dette er alle koblingsstiler som viser effekten på svevet. Hvis lenken og velgeren til koblingene som besøkes begge er til stede i CSS -definisjonen, bruker vi en hovervelgerklasse for å se den resulterende effekten.

På den annen side, når vi vil sveve på ethvert element i HTML, forårsaker det noen effekter ved å bruke noen egenskaper i CSS, enten på det eksisterende innholdet eller på det nye elementformen som et resultat av sveve.

Syntaks av svevelementet

Content_of_html: hover
// erklære CSS -kode eller effekter du vil bruke.

Eksempel 1: Hopp endrer fargen på teksten

Dette eksemplet omhandler transformasjonen av teksten når vi flytter musens markør mot den. Vi kan bruke flere forhold på teksten. Men foreløpig er de to grunnleggende endringene som følger: endringen i fargen på teksten som svevet brukes på og høydepunktet i teksten med en endring i bakgrunnsfargen.

Fra og med HTML -hodeseksjonen, bruk stilmerket inni den mens vi gjør en intern stil. Bruk stildelen inne i taggen. En hoverklasse brukes til å bruke alle effektene på overskriften. Så H1 brukes med hoverklassen.

H1: Hopp
Farge: Hvit;
Bakgrunnsfarge: lilla;

De to egenskapene, som vi diskuterte tidligere, blir brukt. Som standard er fargen på overskriften svart og bakgrunnsfargen på nettsiden er hvit. Men på Hover blir bakgrunnsfargen på den spesifiserte delen lilla, så tekstfargen endres også til hvit.

HTML CSS -kode:

Lukk stilkoden og hodeseksjonen til HTML. Beveger seg mot kroppsdelen, er en overskrift1 erklært. Justeringen for overskriften1

er satt til sentrum. Lukk alle taggene og lagre tekstredaktørfilen. For å utføre utdataene, må vi kjøre filen i nettleseren. Mens du lagrer filen, bør en ting huskes: Lagre filen med HTML -utvidelsen i stedet for å lagre den med tekstutvidelsen. Åpne med standard nettleser slik at du kan få utdataene.

Produksjon:
Videospillerhttps: // linuxhint.com/wp-content/uploads/2022/06/video2.MP400: 0000: 0000: 10 Bruk opp/ned piltastene for å øke eller redusere volumet.

Utgangen i nettleseren fanges opp i form av noen få sekunders video som fører til overskuddet i å vise resultatene. Ved utførelsen av filen vil du se at en enkel overskrift i midten av websiden vises. Når vi tar markøren nær overskriften eller svever over overskriften, endres bakgrunnsfargen og skriftfargen. Hver gang markøren flyttes tilbake, kommer den tilbake til standard.

Eksempel 2: Sover bygger en blokk med tekst

I motsetning til i det forrige eksemplet der den eksisterende teksten ble endret på svevet, blir i dette eksemplet et nytt innhold (blokkering) av HTML lagt til som bare vises når vi svever over den spesifiserte teksten. Denne blokken har også noen dimensjoner og spesifikasjoner. La oss utdype prosedyren.

Fra og med CSS -delen, tyle en div. Denne div skaper en innholdsblokk som er resultatet av å sveve over teksten. Bredde og høyde er de to grunnleggende verdiene som brukes for å danne hvilken som helst form i HTML. Neste er padding -egenskapen. Det er avstandsområdet til innholdet i en blokk eller en form. For eksempel har vi tatt en tekst inne i blokken, så avstanden til teksten og grensen til formen blir tatt som polstring. Hvis bare polstringen brukes, betyr det at det er avstanden inne i boksen på alle sider. Hvis polstringen gjøres fra en spesifisert side, siden vi brukte polstringen fra høyre, betyr det at det er avstanden på høyre side. Denne egenskapen holder teksten innenfor blokken av blokken. Ellers er det sjanser til å overskride teksten ut av grensen til blokken.

Polstring: 20px;
Padding-høyre: 50px;

Denne polstringseffekten brukes for å justere det indre innholdet med det ytre innholdet. Verdien er tatt i piksler.

CSS -kode:

Fontstørrelsen og skriftfargen på teksten brukes på teksten inne i blokken. Den neste stildelen handler om overskriften som vi brukte i svevet. Ettersom innholdsblokken er opprettet inne i Div, er Div inkludert i denne typen stylinger sammen. Blokkforminnholdet er opprettet som er nevnt for å danne et display.

H3: Hopp + div
Display: Block;

Etter det, lukk stilen og hodemerkene. Erklære en overskrift inne i HTML -kroppen. En div dannes. Teksten som vil bli nevnt inne i blokken er også skrevet inne i Div -taggene. Lukk kroppskoden.

HTML Body Code:

Lagre koden i filen og kjør den i nettleseren. Som en utdata fra den forrige koden, tok vi en liten del av videoen for å utdype arbeidet med hoverklassen som er opprettet og designet for å lage en blokk med en tekst inne i blokken.

Produksjon:
Videospillerhttps: // linuxhint.com/wp-content/uploads/2022/06/video33.MP400: 0000: 0000: 13 Bruk opp/ned piltastene for å øke eller redusere volumet.

Videoen viser at en enkel tekst som overskrift vises når vi kjører filen i nettleseren. Men når vi svever over teksten, forårsaker det en endring på websiden. På svevet forblir teksten til overskriften den samme som på utførelsestidspunktet. Men en blokk på venstre side av siden opprettes hver gang vi flytter markøren mot overskriften. Når vi flytter markøren bort fra overskriften, forsvinner blokken. Dette er fordi hoverklassen lager en blokk og tekst inni den. Alle effektene på blokken og teksten brukes i CSS.

Konklusjon

CSS Hover er en eiendom som er vant til å fremtredende eller fremheve HTML -innholdet når vi flytter markøren mot dem. Denne funksjonen brukes mest til å varsle om noe. I denne artikkelen forklarte vi arbeidet med en sveve -klasse, og hvordan HTML -innholdet blir transformert i svevet. I starten ga vi en kort oversikt over hoverklassen. Vi implementerte de to grunnleggende eksemplene på svevetffekten. Det første eksemplet inneholder effekten på den eksisterende teksten, mens det andre eksemplet handler om å vise en ekstra form som svever mot den eksisterende teksten mens den eksisterende teksten forblir den samme.