Hoe kan ik CSS Hover -effecten creëren?

CSS Hover -effecten zijn vrij eenvoudig te creëren, en basishover -effecten kunnen snel en gemakkelijk worden geïmplementeerd en gewijzigd met een aantal andere opties. Cascading Style Sheets (CSS) is een taal die wordt gebruikt voor het maken van de stijl en lay -out van een document dat in een markup -taal is gemaakt, en het kan worden gebruikt om eenvoudig te hover -effecten te creëren. Hover -effecten zijn veranderingen die optreden met tekst, afbeeldingen of andere objecten in een document wanneer de door een muis worden aanwijzer over het object wordt bekeken. CSS Hover -effecten worden meestal gemaakt in de CSS -code en kunnen snel en effectief worden geïmplementeerd.

Een van de gemakkelijkste soorten CSS -zwevende effecten is een effect dat een wijziging van een link op een website veroorzaakt wanneer deze wordt overgedragen. Iemand wil bijvoorbeeld een tekstuele link maken die eruitziet als standaardtekst, of een andere kleur heeft dan de rest van de pagina, maar wanneer het wordt "overgeslagen" of "gedoe", wordt deze onderstreept of aangemoedigd. Hoe dit wordt gedaan, zal precies afhangenOp de exacte codering die op de pagina wordt gebruikt, maar in een eenvoudig geval kan het CSS -hovereffect worden toegevoegd binnen de CSS -regels in het gedeelte "Stijl".

Er wordt een nieuwe regel gemaakt voor het CSS -zweefeffect met behulp van de juiste tag voor het object waaraan het effect wordt toegevoegd. Bijvoorbeeld, tekst die wordt gekozen kan deel uitmaken van een lijst of geselecteerd in de hoofdtekst van een webpagina. Deze tekst zou een specifieke tag moeten hebben die erbij is gekoppeld aan de codeer van het lichaam. Met deze tag opgemerkt, kan de regel worden gemaakt om een ​​CSS -hover -effect vast te stellen voor objecten met die gegeven tag.

Tekst gebruiken, bijvoorbeeld, als u een link wilt laten onderstreept wanneer een gebruiker erover zweeft, kunt u beginnen met het taggen van die link in de lichaamscode en een speciale regel voor die tag maken. Binnen deze regel kunt u aangeven welke kleur die tekst zou moeten zijn, waardoor deze gemakkelijk opvalt van de omringende tekst, en visueel inDicateren dat de gebruiker er misschien over wil zweven, wat dan het CSS -zwevende effect zou activeren. Dit effect wordt toegevoegd door een "hover pseudo-klasse" te maken aan de tag voor de tekstlijn.

Als de tag voor de tekst bijvoorbeeld "A" was, zou je de pseudo-klasse gebruiken die eruitzag als "A: Hover {…}" met het gewenste CSS Hover-effect aangegeven in de bracket. Met behulp van het vorige voorbeeld, als het gewenste effect was om de tekst te onderstrepen wanneer deze wordt overgedragen, dan zou het "tekstdecoratie: onderstreping" lezen; " binnen de beugel. Er zijn een aantal verschillende hover -effecten die voor verschillende objecten kunnen worden gemaakt, en elk heeft een specifiek opdracht om het effect te creëren, maar het proces is in de meeste gevallen vergelijkbaar.