Hoe kan ik CSS-hovereffecten maken?
CSS-hovereffecten zijn vrij eenvoudig te maken en basis-hovereffecten kunnen snel en eenvoudig worden geïmplementeerd en aangepast met een aantal andere opties. Cascading style sheets (CSS) is een taal die wordt gebruikt bij het maken van de stijl en lay-out van een document dat is gemaakt in een opmaaktaal en kan worden gebruikt om eenvoudig hover-effecten te maken. Zweefeffecten zijn wijzigingen die optreden bij tekst, afbeeldingen of andere objecten in een document wanneer de aanwijzer bestuurd door een muis over het object wordt gehouden. CSS-hovereffecten worden meestal binnen de CSS-code gemaakt en kunnen snel en effectief worden geïmplementeerd.
Een van de eenvoudigste soorten CSS-hovereffecten die u kunt maken, is een effect dat een wijziging in een link op een website veroorzaakt wanneer deze wordt verplaatst. Iemand wil bijvoorbeeld een tekstuele koppeling maken die eruitziet als standaardtekst, of een andere kleur heeft dan de rest van de pagina, maar wanneer "eroverheen" of "met de muis eroverheen" wordt gegaan, is dit onderstreept of aangemoedigd. Hoe dit precies wordt gedaan, hangt meestal af van de exacte codering die op de pagina wordt gebruikt, maar in een eenvoudig geval kan het CSS-zweefeffect worden toegevoegd binnen de CSS-regels in het gedeelte 'stijl'.
Er wordt een nieuwe regel gemaakt voor het CSS-zweefeffect met de juiste tag voor het object waaraan het effect wordt toegevoegd. De tekst die wordt gekozen, kan bijvoorbeeld deel uitmaken van een lijst of worden geselecteerd in de hoofdtekst van een webpagina. Aan deze tekst moet een specifieke tag worden gekoppeld in de hoofdcodering. Met deze tag genoteerd, kan de regel worden gemaakt om een CSS-zweefeffect voor alle objecten met die gegeven tag tot stand te brengen.
Als u bijvoorbeeld tekst wilt gebruiken om een link onderstreept te maken wanneer een gebruiker erover zweeft, kunt u beginnen met het taggen van die link in de bodycode en een speciale regel voor die tag maken. Binnen deze regel kunt u aangeven welke kleur die tekst moet hebben, deze gemakkelijk laten opvallen ten opzichte van de omringende tekst en visueel aangeven dat de gebruiker erover wil zweven, wat dan het CSS hover-effect zou activeren. Dit effect wordt toegevoegd door een "hover pseudo-klasse" aan de tag voor de tekstregel te maken.
Als de tag voor de tekst bijvoorbeeld 'a' was, zou u de pseudoklasse gebruiken die eruitzag als 'a: hover {…}' met het gewenste CSS hover-effect aangegeven binnen de haakjes. In het vorige voorbeeld, als het gewenste effect was om de tekst te onderstrepen wanneer deze boven de muisaanwijzer wordt geplaatst, dan zou er “tekstdecoratie: onderstrepen;” binnen de haak staan. Er zijn een aantal verschillende zweefeffecten die voor verschillende objecten kunnen worden gemaakt en elk heeft een specifiek commando om het effect te creëren, maar het proces is in de meeste gevallen vergelijkbaar.