[CSS] a.hover werkt maar 1x

[Verwijderd]

Ik heb het volgende staan in een css bestand:

Cascading Stylesheet:

a:link {
    color: #000000;
    text-decoration: underline;
}
a:hover {
    color: #FF0000;
    text-decoration: underline;
}
a:visited {
    color: #000000; 
    text-decoration: underline; 
}
a:active {
    color: #000000; 
    text-decoration: underline; 
}

Dit werkt goed, als ik met me muis over de links ga dan worden ze rood.
Maar dan, als ik eenmaal op de link gedrukt heb. Dan word de link de keer erna als ik erover heen ga niet meer rood . In FF en in IE, gebeurd dit. Wat doe ik verkeerd?

[JHS]

Dat heeft te maken met de volgorde . Door nu :visited te plaatsen na :hover overruled de :visited de :hover zodra je de pagina een keer bezocht hebt. De oplossing is dus een andere volgorde te kiezen:

Cascading Stylesheet:

a:link { }
a:visited { }
a:hover { }
a:active { }

[Verwijderd]

JHS schreef op zondag 24 september 2006 @ 12:17:
Dat heeft te maken met de volgorde . Door nu :visited te plaatsen na :hover overruled de :visited de :hover zodra je de pagina een keer bezocht hebt. De oplossing is dus een andere volgorde te kiezen:

Cascading Stylesheet:

a:link { }
a:visited { }
a:hover { }
a:active { }

dankje, het probleem is nu opgelost!

[Hahn]

Als je CSS gaat leren dan heb je daar ook een ezelsbruggetje voor: LieVer HuisArts. Waarbij de volgorde dus link - visited - hover - active is

[Tepel]

Ik meende dat het altijd Love Hate was

[Hahn]

Je kan er natuurlijk van alles bij verzinnen, maar blijkbaar was mijn cursus vertaald naar het nederlands

[Verwijderd]

Het lijkt me sowieso onzin om ze allemaal te noemen. 9 van de 10 keer gebruik je er maar 2.
Zou zelf gewoon hetvolgende doen:

Cascading Stylesheet:

a {
  color: #000;
  text-decoration: underline;
}
a:hover {
  color: #f00;
}

In één oogopslag duidelijk en kortere code.

[André]

Verwijderd schreef op maandag 25 september 2006 @ 02:48:
Het lijkt me sowieso onzin om ze allemaal te noemen. 9 van de 10 keer gebruik je er maar 2.

In het kader van de usability zou ik 9 van de 10 keer ook visited gebruiken. Zo kun je makkelijk zien welke pagina's je al gehad hebt. Active daarintegen gebruik ik bijna nooit.

[JHS]

velo: Naast wat * André al aangeeft, zou het dan niet duidelijker zijn om het zo te doen:

Cascading Stylesheet:

a, a:visited, a:active { }
a:hover { }

?

[Verwijderd]

JHS schreef op dinsdag 26 september 2006 @ 16:54:
velo: Naast wat * André al aangeeft, zou het dan niet duidelijker zijn om het zo te doen:

Cascading Stylesheet:

a, a:visited, a:active { }
a:hover { }

?

Daar zie ik echt het nut niet van in eerlijk gezegd.
Dat is hetzelfde als:

Cascading Stylesheet:

body, p, h1, h2, h3, h4, div, td {
  font-family: Verdana, sans-serif;
}

i.p.v. alleen de body te doen, want die omvat ook die anderen. Lijkt mij?

Het is wat anders als je inderdaad de visited andere properties meegeeft in het kader van usability uiteraard. Maar dan gaat het er om dat het afwijkt van a in het algemeen, niet dat je het gewoon maar noemt in je css "voor het overzicht".

[Verwijderd]

Is het mogelijk om binnen 1 pagina de links twee verschillende kleuren te geven?

[Verwijderd]

Verwijderd schreef op woensdag 11 oktober 2006 @ 18:55:
Is het mogelijk om binnen 1 pagina de links twee verschillende kleuren te geven?

Ja. Volg een CSS tutorial en je leert vanzelf hoe je selectors moet gebruiken.

Verwijderd schreef op dinsdag 26 september 2006 @ 23:14:
[...]


Daar zie ik echt het nut niet van in eerlijk gezegd.
Dat is hetzelfde als:

Cascading Stylesheet:

body, p, h1, h2, h3, h4, div, td {
  font-family: Verdana, sans-serif;
}

i.p.v. alleen de body te doen, want die omvat ook die anderen. Lijkt mij?

Het is wat anders als je inderdaad de visited andere properties meegeeft in het kader van usability uiteraard. Maar dan gaat het er om dat het afwijkt van a in het algemeen, niet dat je het gewoon maar noemt in je css "voor het overzicht".

Dat klopt. Ik heb vandaag nog een collega geïnstrueerd op het gebied van die :hover en :visited pseudo-classes. Het kwam neer op ongeveer het volgende:

Voor properties die voor een linkje altijd hetzelfde zijn, ongeacht de state van het linkje, gebruik je gewoon a. Eventueel maak je de selectors specifieker. Voor properties die per state kunnen verschillen, geef je per state dezelfde properties op, voor alle 4 mogelijke states, in de volgorde link, visited, hover, active. Als verschillende states dezelfde properties hebben mag je de rules en selectors groeperen. Properties die in één state worden opgegeven moeten voor alle andere states ook worden opgegeven, en mogen niet in de "basiseigenschappen" voorkomen.

Voorbeeld:

Cascading Stylesheet:

map ul li a {
   color: #336699;
   background-color: transparent;
}

map ul li a:link,
map ul li a:visited {
   text-decoration: none;
}

map ul li a:hover,
map ul li a:active {
   text-decoration: underline;
}

Op deze manier ben je zo expliciet dat het precies duidelijk is wat er gebeurt, en wat er per state verschilt. Er is altijd maar 1 state van belang, plus de "basiseigenschappen". Op deze manier heb je de minste kans om tegen onduidelijkheden aan te lopen.