CSS-də Keçidlərin Vəziyyətləri

Düşünürəm ki, siz internetdə müxtəlif saytları ziyarət edərkən, keçidlərə siçan kursorunu gətirdikdə onların adətən reaksiya verdiyini fərq etmisiniz. Belə bir effekti, keçidlərin müxtəlif vəziyyətlərində davranış təyin etməklə əldə etmək olar.

Məsələn, belə - a:hover - biz siçan kursoru keçidin üzərinə gətirildiyi vəziyyəti tutarıq. Bu anda biz, məsələn, keçidin rəngini dəyişə bilərik və ya onun altını cızığı götürə/əlavə edə bilərik. :hover quruluşu psevdo-sinif adlanır. Psevdo-siniflər elementlərin müxtəlif vəziyyətlərini tutmağa imkan verir.

:hover-dan əlavə, həmçinin :link psevdo-sinifləri də var ki, bu da ziyarət edilməmiş keçidi tutur, və :visited psevdo-sinifləri də var ki, bu da ziyarət edilmiş keçidi tutur. Bəzi saytlarda onların köməyi ilə istifadəçilərə harada olduqlarını və harada olmadıqlarını göstərirlər. Həmçinin :active psevdo-sinifi də var ki, bu da aşağıdakı vəziyyəti tutur: elementin üzərinə siçan ilə kliklənib, amma hələ buraxılmayıb.

Aşağıdakı nümunədə :hover vəziyyətində olan keçid üçün alt cızıq götürülür, :link vəziyyətində qırmızı rəng təyin edilir, :visited vəziyyətində - yaşıl, :active vəziyyətində isə - mavi. Nəticədə belə olacaq ki, əvvəlcə keçid qırmızı rəngdə olacaq, ona kliklədikdən sonra - yaşıl, əgər ona siçanla klikləsəniz və buraxmasanız - mavi, əgər siçanı onun üzərinə gətirsəniz - altıcızıqsız olacaq:

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

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