Achtergrond kleur van link

[Priske]

Heb twee lijstjes gemaakt op dezelfde pagina. Het zijn allemaal linken naar een andere pagina. Graag had ik bij de ene lijst de achtergrond kleur van het woord in het blauw gehad. Dat is niet zo een probleem, gewoon in pagina eigenschappen de link aanpassen en daarna bij a:hover het kleurtje instellen. En de achtergrond van de link verschijnt nestjes in blauw als je er met muis over gaat. Maar nu komt het probleem...had graag de andere lijst met koppelingen in het rood gehad als je er met de muis overgaat. En dat lukt me dus niet...het lijkt wel of je maar 1 keer kan instellen hoe dat alle koppelingen op de pagina er moeten uitzien maar het zou eigenlijk toch ook afzonderlijk in te stellen moeten zijn?

Iemand enig idee of het mogelijk is om twee verschillende "a:hover's" te hebben op dezelfde pagina? (liefst zonder al te veel zelf te moeten schrijven in de html code...)

 

[csshunter]

Jazeker, dat kan heel goed: met CSS (cascade style sheets).
Daar zou je zeker iets over moeten lezen, bijvoorbeeld hier.

Maar nu je vraag.
Als je elk lijstje een ID (persoonlijke IDentificatie) meegeeft, kan je stijlregels opgeven voor de aparte ID's.
Dan wordt het in de html:

<ul id="lijstje-1">
	<li><a href="#nogniks">de eerste link</a></li>
	<li><a href="#nogniks">de tweede link</a></li>
	<li><a href="#nogniks">de derde link</a></li>
</ul>

Met lijstje-2 doe je hetzelfde.
In de head van het document zet je een "stijlblokje" met wat je wilt dat er in lijstje-1 gebeurt:

<style type="text/css">
#lijstje-1 a:hover { 
	background: blue;
	color: white;
	}
</style>

Voor lijstje 2 doe je weer hetzelfde.

Je kan dit hier in de praktijk in werking zien.

Succes!
CSShunter

 

[Priske]

Enorm bedankt! Ga meteen aan de slag en hopelijk lukt het