Efectele de hover CSS sunt destul de simplu de creat, iar efectele de hover de bază pot fi implementate și modificate rapid și ușor cu o serie de alte opțiuni. Foile de stil în cascadă (CSS) este un limbaj utilizat în crearea stilului și aspectului unui document creat într-un limbaj de marcare și poate fi folosit pentru a crea cu ușurință efecte de trecere. Efectele de trecere cu mouse-ul sunt modificări care apar cu text, imagini sau alte obiecte dintr-un document atunci când cursorul controlat de un mouse este plasat peste obiect. Efectele de hover CSS sunt de obicei create în codul CSS și pot fi implementate rapid și eficient.
Unul dintre cele mai simple tipuri de efecte de trecere cu mouse-ul CSS de creat este un efect care provoacă modificarea unui link de pe un site web atunci când trece cu mouse-ul peste acesta. De exemplu, cineva poate dori să creeze un link textual care să arate ca un text standard sau să aibă o culoare diferită de restul paginii, dar când „pasează cu mouse-ul” sau „pasează cu mouse-ul” este subliniat sau încurajat. Cum se face acest lucru, mai exact, va depinde de obicei de codarea exactă utilizată pe pagină, dar într-un caz simplu, efectul de trecere cu mouse-ul CSS poate fi adăugat în regulile CSS din secțiunea „stil”.
O nouă regulă este creată pentru efectul de trecere cu mouse-ul CSS folosind eticheta adecvată pentru obiectul căruia i se adaugă efectul. De exemplu, textul care este ales poate face parte dintr-o listă sau poate fi selectat în corpul unei pagini web. Acest text ar trebui să aibă o etichetă specifică asociată în codarea corpului. Cu această etichetă notă, regula poate fi creată pentru a stabili un efect de hover CSS pentru orice obiect cu acea etichetă dată.
Folosind text, de exemplu, dacă doriți ca un link să devină subliniat atunci când un utilizator trece cu mouse-ul peste el, atunci puteți începe prin a eticheta acel link în codul corporal și a crea o regulă specială pentru acea etichetă. În cadrul acestei reguli, puteți indica ce culoare ar trebui să fie acel text, făcându-l cu ușurință în evidență față de textul din jur și indicând vizual că utilizatorul ar putea dori să treacă cu mouse-ul peste el, ceea ce ar declanșa apoi efectul de hover CSS. Acest efect este adăugat prin crearea unei „pseudo-clase de trecere” la eticheta pentru linia de text.
Dacă eticheta pentru text, de exemplu, a fost „a”, atunci ați folosi pseudo-clasa care arată ca „a:hover {…}” cu efectul de hover CSS dorit indicat în paranteză. Folosind exemplul anterior, dacă efectul dorit a fost sublinierea textului atunci când trece cu mouse-ul peste acesta, atunci s-ar citi „text-decoration: underline;” în cadrul parantezei. Există o serie de efecte de hover diferite care pot fi create pentru diferite obiecte și fiecare are o comandă specifică pentru a crea efectul, dar procesul este similar în majoritatea cazurilor.