CSSda havolalarning holatlari

Men sizning turli saytlarni tashrif qilayotganingizda, havolalar odatda sichqoncha kursori ustiga kelganda qanday reaktsiya qilishiga e'tibor berganingizni o'ylayman. Bunday effektni havolalarning turli holatlaridagi harakatlarini belgilash orqali erishish mumkin.

Misol uchun, shu tarzda - a:hover - biz havolaga sichqoncha kursori olib borilgan holatni ushlaymiz. Bu paytda biz, masalan, havolaning rangini o'zgartirishimiz yoki unga chizishni olib tashlashimiz/qo'shishimiz mumkin. :hover konstruktsiyasi psevdoklass deb ataladi. Psevdoklasslar elementlarning turli holatlarini ushlash imkonini beradi.

:hover dan tashqari yana :link psevdoklasslari mavjud bo'lib, ular tashrif buyurilmagan havolani ushlaydi, va :visited psevdoklasslari, esa tashrif buyurilgan havolani ushlaydi. Ba'zi saytlarda ular yordamida foydalanuvchilarga qayerda bo'lganlari, qayerda bo'lmaganliklarini ko'rsatadi. Yana psevdoklass :active mavjud bo'lib, u quyidagi holatni ushlaydi: elementga sichqoncha bilan bosildi, lekin hali qo'yib berilmagan.

Quyidagi misolda holatdagi havola uchun :hover chizish olib tashlanadi, holatdagi :link qizil rang belgilanadi, holatdagi :visited - yashil, va :active - havorang. Natijada, dastlab havola qizil rangda bo'ladi, unga bosilgandan keyin - yashil, agar unga sichqoncha bilan bosilsa va qo'yib berilmasa - havorang, agar sichqoncha kursori olib borilsa - chizilmagan holatga keladi:

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

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