Länkar i CSS

Länkar :hover

Interaktiva webbläsare ändrar ibland återgivningen som svar på användarens handlingar. CSS erbjuder tre olika klasser för vanliga tillstånd:

:hover-klassen uppträder medans användaren väljer ett element, men aktiverar det inte. Till exempel kan en webbläsare tillämpa denna klass när markören (muspekaren) svävar över en text genererad av detta element.
:active-klassen uppträder medans ett element blir aktiverat av användaren. Till exempel, mellan gångerna som användaren trycker på musknappen och släpper den.
:focus-klassen uppträder när ett element har fokus.

Dessa klasser är inte ömsesidigt exklusiva. Ett element kan motsvara flera av dom på samma gång.

Ett exempel på länkar:

<STYLE TYPE="text/css">
	<!--
	A:link { color: blue }    /* obesökta länkar */
	A:visited { color: purple } /* besökta länkar  */
	A:hover { color: red }    /* översvävande    */
	A:active { color: lime } /* aktiva länkar   */
	-->
	</STYLE>

Så här ser det ut i webläsaren:

obesökta länkar A:link	besökta länkar A:visited	översvävande A:hover	aktiva länkar A:active
Klicka här	Klicka här	Klicka här	Klicka här

Notera att A.hover måste placeras efter A:link och A:visited, eftersom att enligt CSS reglerna kommer färgen för A.hover att döljas. A:active placeras enligt samma regler efter A:hover, den aktiva färgen (lime) kommer att uppträda när användaren både svävar över med muspekaren och aktiverar en länk.

A:focus kan man använda om man vill ha olika bakgrunder för de olika länkfärgerna. Till exempel en färg fö besökta och obesökta länka, och en färg för översvävande och aktiva länkar.

Exempel:

<STYLE TYPE="text/css">
	<!--
	A:link { color: blue }
	A:visited { color: purple }
	A:hover { color: red }
	A:active { color: lime }
        A:focus:link { background: red }
        A:focus:visited { background: red }
        A:focus:hover { background: yellow }
        A:focus:active { background: yellow }
	-->
	</STYLE>

Så här ser det ut i webläsaren:

obesökta länkar A:link	besökta länkar A:visited	översvävande A:hover	aktiva länkar A:active
Klicka här	Klicka här	Klicka här	Klicka här

Om man inte vill att länkarna ska ha något streck under sig kan man använda sig av textdekorationen, text-decoration: none. Detta är särskilt lämpligt för länkar inuti textavsnitt.

Exempel på text-decoration: none:

<STYLE TYPE="text/css">
	<!--
	A:link { color: blue; text-decoration: none }
	A:visited { color: blue; text-decoration: none }
	A:hover { color: red; text-decoration: none }
	A:active { color: green; text-decoration: none }
        A:focus:link { background: red }
        A:focus:visited { background: red }
        A:focus:hover { background: yellow }
        A:focus:active { background: yellow }
	-->
	</STYLE>

Så här ser en länk ut i webläsaren:

Klicka här

Olika muspekare i CSS

cursor

Den här egenskapen gör att man kan få muspekaren att anta en annan form. Denna egenskap kan tilldelas alla element, men det är väl kanske än fördel att den tilldelas element som man för muspekaren över, typ länkar. Egenskapen kan ha värdena auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait och help. Utgångsvärdet är auto, viket gör att när man för muspekaren över en länk får den formen av en hand, över text formen av ett textinsättningstecken, vilket den hade fått även utan denna egenskap.
De olika värdena har följande utseenden. Pröva gärna att föra muspekaren över länkarna.

auto	Skriv: `<A HREF="#hit" STYLE="{ cursor: auto }">auto</A>`
crosshair	Skriv: `<A HREF="#hit" STYLE="{ cursor: crosshair }">crosshair</A>`
default	Skriv: `<A HREF="#hit" STYLE="{ cursor: default }">default</A>`
pointer	Skriv: `<A HREF="#hit" STYLE="{ cursor: pointer }">pointer</A>`
move	Skriv: `<A HREF="#hit" STYLE="{ cursor: move }">move</A>`
e-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: e-resize }">e-resize</A>`
ne-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: ne-resize }">ne-resize</A>`
nw-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: nw-resize }">nw-resize</A>`
n-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: n-resize }">n-resize</A>`
se-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: se-resize }">se-resize</A>`
sw-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: sw-resize }">sw-resize</A>`
s-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: s-resize }">s-resize</A>`
w-resize	Skriv: `<A HREF="#hit" STYLE="{ cursor: w-resize }">w-resize</A>`
text	Skriv: `<A HREF="#hit" STYLE="{ cursor: text }">text</A>`
wait	Skriv: `<A HREF="#hit" STYLE="{ cursor: wait }">wait</A>`
help	Skriv: `<A HREF="#hit" STYLE="{ cursor: help }">help</A>`

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.