Het doel van deze handleiding is om te ontdekken hoe u een afbeelding kunt wijzigen wanneer u zweeft met behulp van CSS. Laten we beginnen!
Wat is :hover in CSS?
De :hover is een element van de pseudo-klasse dat wordt gebruikt om de status van HTML-elementen te wijzigen wanneer een muis het activeert. Deze CSS-selector wordt voornamelijk gebruikt om elementen op te maken of te selecteren. Het kan echter niet worden toegepast op links.
Syntaxis
De syntaxis van :hover wordt hieronder gegeven:
element : zweven {
CSS-code. . .
}
Hier, ' element ” verwijst naar het element waarop u het zweefeffect wilt toepassen.
Nu gaan we naar het praktische voorbeeld van het wijzigen van de afbeelding bij zweven met behulp van CSS.
Voorbeeld: Hoe verander ik de afbeelding tijdens het zweven met behulp van CSS?
Als u eerst de afbeelding bij het aanwijzen wilt wijzigen, voegt u twee afbeeldingen toe in de HTML-sectie. De eerste afbeelding is voor de actieve status en de volgende is voor de zweefstatus.
Stap 1: Afbeeldingen toevoegen
Voor het opgegeven doel zullen we twee afbeeldingen toevoegen, ' afbeelding1 ' en ' afbeelding2 ”, en wijs de klassenaam toe aan de tweede afbeelding als “ hover_img ”.
HTML
< lichaam >< div klas = 'img' >
< img src = 'afbeelding1.png' >
< img src = 'image2.png' klas = 'hover_img' >
< / div >
< / lichaam >
Stap 2: Stijl afbeeldingen
Ga nu naar de CSS om de positie van beide afbeeldingen in te stellen met ' positie ' eigendom. We zullen zijn positie instellen als ' absoluut ” om het absoluut te positioneren met verwijzing naar zijn naaste ouder.
CSS
.img {positie : absoluut ;
}
Dit geeft het volgende resultaat:
In de volgende stap plaatsen we de tweede afbeelding voor de eerste. Om dit te doen, stellen we de positie van de afbeelding in als ' absoluut ' en stel de bovenste en linker positie in als ' 0 ”. Het gebruik van deze afbeelding wordt voor de eerste afbeelding geplaatst, maar we willen de tweede afbeelding weergeven wanneer een muis erop zweeft. Dus, het instellen van de weergavewaarde als ' geen ” zal het gewenste resultaat tonen:
.hover_img {positie : absoluut ;
bovenkant : 0 ;
links : 0 ;
Scherm : geen ;
}
De uitvoer van de gegeven code is als volgt:
Tweede afbeelding is succesvol verborgen achter de eerste afbeelding.
Ga nu naar de volgende stap.
Stap 3: Verander afbeelding op Hover
Gebruik vervolgens ' :zweven ' en selecteer ' .img ” om de muisaanwijzer op het geselecteerde element toe te passen. Wijs vervolgens de klassenaam van de tweede afbeelding toe ' .hover_img ”. Stel daarna binnen de haakjes de waarde van de eigenschap display in als ' in lijn ” waardoor het element in dezelfde regel past:
.img : zweven .hover_img {Scherm : in lijn ;
}
Hier is het resultaat dat aantoont dat de afbeelding wordt gewijzigd wanneer de gebruiker erop zweeft:
De hierboven gegeven uitvoer geeft aan dat we de afbeelding met zweven met behulp van CSS met succes hebben gewijzigd.
Conclusie
Afbeelding kan worden gewijzigd bij zweven met behulp van de ' :zweven ” pseudo-klasse-element. Om dit te doen, voegt u de vereiste afbeeldingen toe aan het HTML-bestand, plaatst u ze op dezelfde positie met behulp van CSS en past u de :hover-selector erop toe. Als gevolg hiervan verandert de eerste afbeelding wanneer u erover beweegt. In dit artikel hebben we met een praktisch voorbeeld uitgelegd hoe je een afbeelding bij hover kunt wijzigen met behulp van de :hover.