Ҳолатҳои пайвандҳо дар CSS

Ман фикр мекунем, ки шумо ҳангоми ташриф овардан ба вебсайтҳои гуногун дар интернет диққат додаед, ки пайвандҳо одатан ба роҳзанди курсори муш ба онҳо реакция мерасонанд. Чунин таъсирро бо муайян кардани рафтори пайвандҳо дар ҳолатҳои гуногун ба даст овардан мумкин аст.

Масалан, ин тавр - a:hover - мо ҳолатеро дастгир мекунем, ки курсори муш ба пайванд роҳзанда шудааст. Дар ин лаҳза мо метавонем, масалан, ранги пайвандро тағир диҳем ё зерихат задани онро хориҷ кунем/илова кунем. Сохтмони :hover псевдокласс номида мешавад. Псевдоклассҳо имкон медиҳанд, ки ҳолатҳои гуногуни унсурҳоро дастгир кунанд.

Ғайр аз :hover псевдоклассҳои дигар ҳастанд: :link, ки пайванди дида нашударо дастгир мекунанд, ва :visited, ки пайванди дидашударо дастгир мекунанд. Дар баъзе вебсайтҳо бо кӯмаки онҳо ба корбарон нишон медиҳанд, ки онҳо дар куҷо будаанд ва дар куҷо - набудаанд. Псевдокласси дигар :active низ ҳаст, ки ҳолати зеринро дастгир мекунад: ба унсур бо муш клик карда шуд, аммо ҳанӯз озод нашудааст.

Дар мисоли зерин барои пайванд дар ҳолати :hover зерихат задан хориҷ карда мешавад, дар ҳолати :link ранги сурх муайян карда мешавад, дар ҳолати :visited - сабз, дар :active - кабуд. Дар натиҷа чунин хоҳад шуд, ки дар аввал пайванд ранги сурх хоҳад дошт, пас аз клик кардан ба он - сабз, агар бо муш ба он клик карда шавад ва озод нашавад - кабуд, ва агар курсори муш ба он роҳзанда шавад - зерихат назанимада хоҳад шуд:

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

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