Definition af udseende på tekstlinks

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:

link

link, der ikke har været besøgt endnu.

visited

link, der allerede har været besøgt.

hover

link, hvor cursor er inde over netop nu.

focus

link, man har 'bladret' sig frem til på tastaturet. Dette virker desværre ikke ens i alle browsere 1).

active

link, der netop nu er aktiveret (der er blevet klikket).

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

FreeFind