CSS-ում հղումների վիճակները

Կարծում եմ, որ դուք, ինտերնետում տարբեր կայքեր այցելելիս, ուշադրություն եք դարձրել, որ հղումները սովորաբար արձագանքում են դրանց վրա մկնիկի սեղմումին: Նման ազդեցության կարելի է հասնել՝ սահմանելով հղումների վարքագիծը տարբեր վիճակներում:

Օրինակ, այսպես - a:hover - մենք կբռնենք այն վիճակը, երբ հղման վրա դրվել է մկնիկի կուրսորը: Այս պահին մենք կարող ենք, օրինակ, փոխել հղման գույնը կամ հեռացնել/ավելացնել դրա ընդգծումը: :hover կոնստրուկցիան կոչվում է կեղծ-դաս: Կեղծ-դասերը թույլ են տալիս բռնել տարրերի տարբեր վիճակներ:

:hover-ից բացի, կան նաև կեղծ-դասեր :link, որոնք բռնում են չայցելված հղումը, և :visited, որոնք բռնում են այցելված հղումը: Որոշ կայքերում դրանց օգնությամբ ցույց են տալիս օգտատերերին, թե որտեղ նրանք եղել են, և որտեղ՝ ոչ: Կա նաև կեղծ-դաս :active, որն բռնում է հետևյալ վիճակը. տարրի վրա մկնիկով սեղմել են, բայց դեռ չեն բաց թողել:

Հետևյալ օրինակում հղման համար :hover վիճակում հեռացվում է ընդգծումը, :link վիճակում սահմանվում է կարմիր գույն, :visited վիճակում - կանաչ, իսկ :active վիճակում - երկնագույն: Արդյունքում կստացվի, որ սկզբում հղումը կլինի կարմիր գույնի, դրա վրա սեղմելուց հետո - կանաչ, եթե սեղմել դրա վրա մկնիկով և չբաց թողնել - երկնագույն, իսկ եթե դնել մկնիկը - կդառնա չընդգծված:

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

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

Результат: