A linkek állapotai a CSS-ben

Azt hiszem, ha különböző weboldalakat látogatsz az interneten, észrevetted, hogy a linkek általában reagálnak az egér rámutatására. Ezt a hatást úgy érhetjük el, hogy megadjuk a linkek viselkedését különböző állapotaikban.

Például így - a:hover - elkaphatjuk azt az állapotot, amikor az egérmutatót a linkre viszik. Ebben a pillanatban például megváltoztathatjuk a link színét, vagy eltávolíthatjuk/hozzáadhatunk alaáhúzást. A :hover szerkezetet pszeudoosztálynak nevezzük. A pszeudoosztályok lehetővé teszik az elemek különböző állapotainak elkapását.

A :hover mellett vannak még :link pszeudoosztályok is, amelyek a nem látogatott linket kapják el, és :visited pszeudoosztályok, amelyek a látogatott linket kapják el. Egyes weboldalakon segítségükkel mutatják a felhasználóknak, hol voltak már, és hol nem. Van még a :active pszeudoosztály is, amely a következő állapotot kapja el: rákattintottak az elemre, de még nem engedték el.

A következő példában a link :hover állapotában eltávolítjuk az aláhúzást, :link állapotában piros színt állítunk be, :visited állapotában - zöldet, :active állapotában - kéket. Ennek eredményeképpen kezdetben a link piros színű lesz, rákattintás után - zöld, ha rákattintanak és nem engedik el - kék, ha pedig rámutatnak az egérrel - aláhúzás nélküli lesz:

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

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