Tillstånd för länkar i CSS

Jag tror att du, när du besöker olika webbplatser på internet, har lagt märke till att länkar vanligtvis reagerar när du för muspekaren över dem. Denna effekt kan uppnås genom att specificera beteendet för länkar i olika tillstånd.

Till exempel, så här - a:hover - fångar vi tillståndet när muspekaren förs över en länk. I det ögonblicket kan vi till exempel ändra länkens färg eller ta bort/lägga till understrykning. Konstruktionen :hover kallas för ett pseudoklass. Pseudoklasser låter dig fånga olika tillstånd hos element.

Förutom :hover finns det även pseudoklasser som :link, som fångar en länk som inte har besökts, och :visited, som fångar en länk som har besökts. På vissa webbplatser används dessa för att visa användarna var de har varit, och var de inte har varit. Det finns också pseudoklassen :active, som fångar följande tillstånd: man har klickat på elementet med musen, men ännu inte släppt.

I följande exempel tas understrykningen bort för en länk i tillståndet :hover, i tillståndet :link sätts en röd färg, i tillståndet :visited - grön, i :active - blå. Resultatet blir att länken först är röd, efter att ha klickat på den - grön, om man håller ner musklicket på den - blå, och om man för muspekaren över den - blir den inte understruken:

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

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