<a:link>

Siden er opdateret 5. 12. 2011

Vil du styre udseende på links med hensyn til farve, baggrund og eventuelle under- eller overstregninger, skal definitionen af de forskellige linkfunktioner falde i denne rækkefølge:

a:link
link, der ikke har været besøgt endnu.
a:visited
link, der allerede har været besøgt.
a:hover
link, hvor cursor er inde over netop nu.
a:focus
link, man har 'bladret' sig frem til på tastaturet. Dette virker desværre ikke ens i alle browsere 1).
a:active
link, der netop nu er aktiveret (der er blevet klikket).

Når du vælger at bruge pseudoklasserne til elementet a, bør du i css erklære dem i den herover viste rækkefølge - ellers vil du opleve, at det ikke helt virker som du havde tænkt sig.

Eksempel på definition af udseende på tekstlinks:

a:link, a:visited, a:active
{
text-decoration: none;
color: #3333bb;
background: inherit; /* arver baggrundens farve */
}

a:hover, a:focus
{
color: #cc0055;
background: inherit; /* arver baggrundens farve */
text-decoration: underline overline
}

Her fastlægger vi, at alle links, både 'ikke besøgte', 'besøgte' og 'aktive' skal have farven hex#3333bb uden egen baggrundsfarve og at der IKKE skal være en streg under links.

Sidst bestemmes (med a:hover), at et link, som musen kommer ind over skal skifte til farven hex#cc0055 uden egen baggrundsfarve og at der skal komme en streg under og over linket, indtil musen fjernes fra linket. I samme gruppe defineres med a:focus, at hvis man manøvrerer sig frem til linket med tastaturet (brug af [Tab]), skal det markeres på samme måde som ved hover.

Hvis a:active skal have samme farve som a:link og a:visited, kan den noteres sammen med disse. Så er det kun a:hover og a:focus, der får en anden farve.


Forskellige browseres måde at håndtere focus

1):

Nyere Gecko-browsere
Gentagne tryk på [Tab].
MSIE
Gentagne tryk på [Tab]. Den css-definerede markering udebliver dog
Opera
Hold [Ctrl] nede og tast [Pil op] eller [Pil ned]

Disse forskelle behøver du dog ikke spekulere på, når du udvikler menu til din hjemmeside. Det er noget, den enkelte bruger skal vide om sin browser.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - html - elementer - <a:link>
sidens top
Brugere lige nu: 1
Home Mail