Formålet med denne manual er at udforske, hvordan man ændrer et billede, når man svæver ved hjælp af CSS. Så lad os begynde!
Hvad er :hover i CSS?
:hoveren er et element af pseudo-klassen, der bruges til at ændre tilstanden af HTML-elementer, når en mus udløser det. Denne CSS-vælger bruges primært til at style eller vælge elementer. Det kan dog ikke anvendes på links.
Syntaks
Syntaksen for :hover er angivet nedenfor:
element : svæve {
CSS kode. . .
}
Her, ' element ” refererer til det element, hvor du vil anvende svæveeffekten.
Nu vil vi gå til det praktiske eksempel på at ændre billedet ved svæv ved hjælp af CSS.
Eksempel: Hvordan ændrer man billede ved svæv ved hjælp af CSS?
For at ændre billedet, når du svæver først, skal du tilføje to billeder i HTML-sektionen. Det første billede er for den aktive tilstand, og det næste er for svævetilstanden.
Trin 1: Tilføj billeder
Til det angivne formål tilføjer vi to billeder, ' billede 1 ' og ' billede 2 ', og tildel klassenavnet til det andet billede som ' hover_img ”.
HTML
< legeme >< div klasse = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' klasse = 'hover_img' >
< / div >
< / legeme >
Trin 2: Stil billeder
Flyt nu til CSS for at indstille placeringen af begge billeder ved hjælp af ' position ” ejendom. Vi vil sætte dens position som ' absolut ” at placere den absolut med reference til dens nærmeste forælder.
CSS
.img {position : absolut ;
}
Dette vil vise følgende resultat:
I det næste trin vil vi sætte det andet billede foran det første. For at gøre det, vil vi indstille placeringen af billedet som ' absolut ' og indstil den øverste og venstre position som ' 0 ”. Brug af dette billede placeres foran det første billede, men vi ønsker at vise det andet billede, når en mus svæver på det. Så indstil visningsværdien som ' ingen ' vil vise det ønskede resultat:
.hover_img {position : absolut ;
top : 0 ;
venstre : 0 ;
Skærm : ingen ;
}
Output af den givne kode er som følger:
Andet billede er med succes skjult bag det første billede.
Gå nu til næste trin.
Trin 3: Skift billede ved svæv
Brug derefter ' :hover ' og vælg ' .img ” for at anvende hover på det valgte element. Tildel derefter klassenavnet på det andet billede ' .hover_img ”. Indstil derefter værdien af visningsegenskaben inden for parentesen som ' inline ” som vil tvinge elementet til at passe i samme linje:
.img : svæve .hover_img {Skærm : inline ;
}
Her er resultatet, der viser, at billedet ændres, når brugeren holder musemarkøren på det:
Det ovenfor givne output indikerer, at vi med succes har ændret billedet ved svæv ved hjælp af CSS.
Konklusion
Billedet kan ændres ved at svæve ved at bruge ' :hover ” pseudoklasseelement. For at gøre det skal du tilføje de nødvendige billeder i HTML-filen, sætte dem i samme position ved hjælp af CSS og anvende :hover-vælgeren på dem. Som et resultat vil det første billede ændre sig, når du holder markøren over det. I denne artikel har vi forklaret, hvordan man ændrer et billede på hover ved hjælp af :hoveren med et praktisk eksempel.