Linkstatussen in CSS
Ik denk dat je, wanneer je verschillende websites bezoekt op internet, hebt opgemerkt dat links meestal reageren wanneer je er met de muis overheen gaat. Dit effect kan worden bereikt door het gedrag van links in verschillende staten te definiëren.
Zo kunnen we - a:hover - bijvoorbeeld
de status vastleggen wanneer de muiscursor
over een link wordt bewogen. Op dat moment kunnen we, bijvoorbeeld,
de kleur van de link veranderen of de
onderstreping verwijderen/toevoegen. De constructie :hover
wordt een pseudoklasse genoemd. Pseudoklassen
stellen je in staat om verschillende staten van elementen te detecteren.
Naast :hover zijn er ook pseudoklassen
:link, die een niet-bezochte link detecteren,
en :visited, die een bezochte link detecteren. Op sommige sites
worden deze gebruikt om gebruikers te laten zien waar
ze wel en niet zijn geweest. Er is ook de pseudoklasse
:active, die de volgende status detecteert:
er is op het element geklikt met de muis, maar
de knop is nog niet losgelaten.
In het volgende voorbeeld wordt voor een link in de status
:hover de onderstreping verwijderd, in
de status :link wordt een rode kleur ingesteld,
in de status :visited - groen, en in
:active - blauw. Het resultaat is
dat de link eerst rood van kleur zal zijn,
na erop te hebben geklikt - groen, als je erop
krijgt met de muis en niet loslaat - blauw,
en als je er met de muis overheen gaat - wordt deze
niet-onderstreept:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}
<a href="#">link</a>
:
