CSS-hovringseffekter är ganska enkla att skapa, och grundläggande hovringseffekter kan snabbt och enkelt implementeras och modifieras med ett antal andra alternativ. Cascading Style Sheets (CSS) är ett språk som används för att skapa stilen och layouten för ett dokument som skapats i ett märkningsspråk, och det kan användas för att enkelt skapa hovringseffekter. Svävningseffekter är ändringar som sker med text, bilder eller andra objekt i ett dokument när pekaren som styrs av en mus hålls över objektet. CSS-hovringseffekter skapas vanligtvis inom CSS-koden och kan implementeras snabbt och effektivt.
En av de enklaste typerna av CSS-hovringseffekter att skapa är en effekt som orsakar en ändring av en länk på en webbplats när den hålls över. Till exempel kan någon vilja skapa en textlänk som ser ut som standardtext, eller som har en annan färg än resten av sidan, men när den ”förs över” eller ”håller muspekaren över” är den understruken eller förfinad. Exakt hur detta görs kommer vanligtvis att bero på den exakta kodningen som används på sidan, men i ett enkelt fall kan CSS-hovringseffekten läggas till inom CSS-reglerna i avsnittet ”stil”.
En ny regel skapas för CSS-hovringseffekten med hjälp av lämplig tagg för objektet som effekten läggs till. Till exempel kan text som väljs vara en del av en lista eller väljas i brödtexten på en webbsida. Den här texten bör ha en specifik tagg kopplad till sig i kroppskodningen. Med denna tagg noterad kan regeln skapas för att skapa en CSS-hovringseffekt för alla objekt med den givna taggen.
Om du till exempel använder text, om du vill få en länk att bli understruken när en användare håller muspekaren över den, kan du börja med att tagga den länken i kroppskoden och skapa en speciell regel för den taggen. Inom den här regeln kan du ange vilken färg texten ska ha, så att den enkelt sticker ut från den omgivande texten och visuellt indikerar att användaren kanske vill föra muspekaren över den, vilket då skulle utlösa CSS-hovringseffekten. Denna effekt läggs till genom att skapa en ”hover-pseudo-klass” till taggen för textraden.
Om taggen för texten till exempel var ”a” skulle du använda pseudoklassen som såg ut som ”a:hover {…}” med den önskade CSS-hovereffekten indikerad inom parentes. Med det föregående exemplet, om den önskade effekten var att understryka texten när den hålls över, så skulle det stå ”text-dekoration: understryka;” inom konsolen. Det finns ett antal olika hovringseffekter som kan skapas för olika objekt, och var och en har ett specifikt kommando för att skapa effekten, men processen är likartad i de flesta fall.