CSSдаги ссылкаларнинг ҳолатлари

Мен сиз интернетда турли сайтиларга кириб, у ердаги ссылкаларга sichqoncha курсаткичини олиб борилганда уларнинг ўзгаришига эътибор берган деб ўйлайман. Бундай таъсирни ссылкаларнинг турли ҳолатларида уларнинг ҳаракатини белгилаб ёрдамда эришиш мумкин.

Масалан, шу тарзда - a:hover - биз ссылкага sichqoncha курсаткичи олиб борилган ҳолатни тута оламиз. Ана шу пайтда биз, масалан, ссылканинг рангни ўзгартиришимиз ёки унинг остидиги чизиқни олиб ташлашимиз ёки қўшишимиз мумкин. :hover конструкцияси псевдокласс деб аталади. Псевдокласслар элементларнинг турли ҳолатларини тутиш имконини беради.

:hover дан ташқари яна :link псевдокласслари мавжуд бўлиб, улар зиёрат қилинмаган ссылкани тутади, ва :visited псевдокласслари, улар зиёрат қилинган ссылкани тутади. Айрим сайтиларда улар ёрдамида фойдаланувчиларга улар қайерда бўлганлари ва қайерда бўлмаганлари кўрсатилади. Яна :active псевдокласси мавжуд бўлиб, у кейинги ҳолатни тутади: элементга sichqoncha билан босилди, лекин ҳали қўйиб берилмади.

Кейинги мисолда ссылка учун :hover ҳолатида остидиги чизиқ олинади, :link ҳолатида қизил ранг белгиланади, :visited ҳолатида - яшил, :active ҳолатида - кўк ранг берилади. Натижада босланғичда ссылка қизил рангда бўлади, унга босилгандан сўнг - яшил рангда, агар унга sichqoncha билан босиллиб, қўйилмаса - кўк рангда, агар sichqoncha курсаткичи олиб борилса - ости чизиқсиз бўлади:

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

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

Результат: