Hali za Viungo katika CSS

Ninafikiri kwamba wewe, wakati unatembelea tovuti mbalimbali katika mtandao, umewahi kutilia maanani kwamba viungo kawaida huitikia kuelekeza kipanya juu yao. Athari kama hii inaweza kupatikana kwa kubainisha tabia ya viungo katika hali mbalimbali.

Kwa mfano, kama hivi - a:hover - sisi tutasakama hali, wakati kipanya kimeelekezwa kwenye kiungo. Wakati huu tunaweza, kwa mfano, kubadilisha rangi ya kiungo au kuondoa/kuongeza mstari wa chini. Muundo :hover unaitwa pseudoclass. Pseudoclasses huruhusu kusakama hali tofauti za vipengele.

Licha ya :hover kuna pseudoclasses nyingine :link, ambayo husakama kiungo kisichotembelewa, na :visited, ambayo husakama kiungo kilichotembelewa. Katika baadhi ya tovuti kwa kusaidia kwake huwaonyesha watumiaji, wapi wamewahi kufika, na wapi - hawajafika. Kuna pia pseudoclass :active, ambayo husakama hali ifuatayo: kipengele kimebonyezwa kwa kipanya, lakini bado haijachiliwa.

Katika mfano ufuatao kwa kiungo katika hali :hover mstari wa chini unaondolewa, katika hali :link rangi nyekundu imebainishwa, katika hali :visited - kijani, katika :active - samawati. Matokeo yake yatakuwa, kwamba mwanzoni kiungo kitakuwa na rangi nyekundu, baada ya kubonyeza juu yake - kijani, ikiwa ubonyeze juu yake kwa kipanya na usiichilie - samawati, na ikiwa utaelekeza kipanya - itakuwa isiyo na mstari wa chini:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">kiungo</a>