Skakeltoestande in CSS

Ek dink jy het, terwyl jy verskillende webwerwe in die internet besoek het, agtergekom dat skakels gewoonlik reageer as jy met jou muis oor hulle beweeg. So 'n effek kan bereik word deur die gedrag van skakels in verskeie toestande te definieer.

Byvoorbeeld, so - a:hover - sal ons die toestand vang wanneer die muis oor die skakel beweeg. Op hierdie oomblik kan ons, byvoorbeeld, die kleur van die skakel verander of die onderstreping verwyder of byvoeg. Die konstruksie :hover word 'n pseudoklas genoem. Pseudoklasse laat jou toe om verskillende toestande van elemente te vang.

Behalwe vir :hover is daar ook pseudoklasse :link, wat 'n onbesoekte skakel vang, en :visited, wat 'n besoekte skakel vang. Op sommige webwerwe word dit gebruik om aan gebruikers te wys waar hulle al was en waar nie. Daar is ook die pseudoklas :active, wat die volgende toestand vang: die muis is op die element geklik, maar nog nie losgelaat nie.

In die volgende voorbeeld word die onderstreping vir die skakel in die :hover-toestand verwyder, in die :link-toestand word 'n rooi kleur ingestel, in die :visited- toestand - groen, en in die :active- toestand - blou. Die resultaat sal wees dat die skakel aanvanklik rooi van kleur sal wees, na dit geklik is - groen, as jy daarop klik en nie loslaat nie - blou, en as jy met die muis daaroor beweeg - sal dit nie meer onderstreep wees nie:

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

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