Kuidas luua CSS-i hõljumise efekte?

CSS-i hõljutusefekte on üsna lihtne luua ning põhilisi hõljutusefekte saab kiiresti ja lihtsalt rakendada ja muuta mitmete muude valikute abil. Kaskaadlaadilehed (CSS) on keel, mida kasutatakse märgistuskeeles loodud dokumendi stiili ja küljenduse loomiseks ning selle abil saab hõlpsasti luua hõljutusefekte. Hõljutusefektid on muudatused, mis tekivad teksti, piltide või muude dokumendi objektide puhul, kui hiirega juhitav kursor liigub objekti kohal. CSS-i hõljumise efektid luuakse tavaliselt CSS-koodis ning neid saab kiiresti ja tõhusalt rakendada.

Üks lihtsamaid CSS-i hõljutusefektide tüüpe on efekt, mis põhjustab kursorit hõljutades veebisaidi lingi muutumise. Näiteks võib keegi soovida luua tekstilise lingi, mis näeb välja nagu standardtekst või on ülejäänud lehe värvist erinevat värvi, kuid kui kursorit üle liigutatakse või üle hõljutatakse, on see alla joonitud või rõhutatud. See, kuidas seda täpselt tehakse, sõltub tavaliselt lehel kasutatavast täpsest kodeeringust, kuid lihtsal juhul saab CSS-i hõljumise efekti lisada CSS-i reeglitesse jaotises “Stiil”.

CSS-i hõljutusefekti jaoks luuakse uus reegel, kasutades selle objekti jaoks sobivat silti, millele efekt lisatakse. Näiteks võib valitav tekst olla osa loendist või valitud veebilehe põhiosas. Selle teksti kehakoodis peaks olema sellega seotud konkreetne silt. Kui see silt on märgitud, saab reegli luua CSS-i hõljumise efekti loomiseks selle märgendiga objektide jaoks.

Kui soovite näiteks teksti kasutades linki alla joonida, kui kasutaja hõljutab kursorit selle kohal, võite alustada lingi märgistamisest kehakoodis ja luua selle sildi jaoks erireegli. Selle reegli raames saate näidata, mis värvi see tekst peaks olema, muutes selle hõlpsalt ümbritsevast tekstist eristuvaks ja näidates visuaalselt, et kasutaja võib soovida kursorit selle kohal hõljutada, mis käivitaks CSS-i hõljutusefekti. See efekt lisatakse tekstirea märgendile hõljuva pseudoklassi loomisega.

Kui teksti märgend on näiteks “a”, siis kasutaksite pseudoklassi, mis nägi välja nagu “a:hover {…}”, mille soovitud CSS-i hõljutusefekt on näidatud sulgudes. Eelmist näidet kasutades, kui soovitud efekt oli teksti alla joonimine, kui selle kohale hõljub, loeks see “teksti kaunistamine: allajoon;” sulu sees. Erinevate objektide jaoks saab luua mitmeid erinevaid hõljumise efekte ja igaühel neist on efekti loomiseks konkreetne käsk, kuid protsess on enamikul juhtudel sarnane.