Hvordan du endrer bilde på svevet ved hjelp av CSS

Det er en teknikk som bruker en pekende enhet for å samhandle med elementet. Den kan brukes til å velge eller style forskjellige CSS -elementer som knapper, bilder, menyer og mange flere. Å bruke svever på et element vil endre tilstanden når en mus utløser den spesifiserte hendelsen.

Målet med denne håndboken er å utforske hvordan du endrer et bilde på Hover ved hjelp av CSS. Så la oss begynne!

Hva er: Hopp i CSS?

The: Hover er et element av pseudoklasse som brukes til å endre tilstanden til HTML-elementer når en mus utløser den. Denne CSS -velgeren brukes først og fremst til å style eller velge elementer. Det kan imidlertid ikke brukes på lenker.

Syntaks

Syntaksen til: svevet er gitt nedenfor:

Element: Hopp
CSS -kode ..

Her, “element”Henviser til elementet du vil bruke sveveeffekten.

Nå vil vi flytte til det praktiske eksemplet med å endre bildet på Hover ved hjelp av CSS.

Eksempel: Hvordan endre bilde på Hover ved hjelp av CSS?

For å endre bildet på Hover først, legg til to bilder i HTML -delen. Det første bildet er for den aktive staten, og det neste er for Hover -staten.

Trinn 1: Legg til bilder

For det spesifiserte formålet vil vi legge til to bilder, “image1”Og“image2”, Og tilordne klassenavnet til det andre bildet som“hover_img”.

Html

Trinn 2: Stilbilder

Gå nå til CSS for å angi plasseringen av begge bildene ved å bruke "posisjon”Eiendom. Vi vil sette sin posisjon som “Absolutt”Å plassere det absolutt med henvisning til den nærmeste forelderen.

CSS

.IMG
Posisjon: Absolutt;

Dette vil vise følgende utfall:

I neste trinn setter vi det andre bildet foran det første. For å gjøre det, vil vi sette posisjonen til bildet som “Absolutt”Og sett topp- og venstreposisjonen som“0”. Bruke dette bildet er plassert foran det første bildet, men vi vil vise det andre bildet når en mus svever på det. Så å sette visningsverdien som "ingen”Vil vise ønsket resultat:

.hover_img
Posisjon: Absolutt;
Topp: 0;
Venstre: 0;
Display: Ingen;

Utgangen fra den gitte koden er som følger:

Det andre bildet er vellykket skjult bak det første bildet.

Gå nå til neste trinn.

Trinn 3: Endre bilde på svevet

Neste, bruk ":sveve”Og velg“.img”Å bruke svevet på det valgte elementet. Tildel deretter klassenavnet til det andre bildet ".hover_img”. Etter det, inne i parentesene, setter du verdien av visningsegenskapen som “på linje”Som vil tvinge elementet til å passe inn i samme linje:

.IMG: Hopp .hover_img
Display: Inline;

Her er resultatet som viser at bildet endres når brukeren svever på det:

Den ovennevnte utgangen indikerer at vi har endret bildet på Huve ved hjelp av CSS.

Konklusjon

Bilde kan endres på svevet ved å bruke ":sveve”Pseudoklasse element. For å gjøre det, legg til de nødvendige bildene i HTML -filen, sett dem i samme posisjon ved hjelp av CSS, og bruk: Hover -velgeren på dem. Som et resultat vil det første bildet endre seg når det svinger over det. I denne artikkelen har vi forklart hvordan du endrer et bilde på Hover ved å bruke: Huve med et praktisk eksempel.