css - hover links

Status
Niet open voor verdere reacties.
M

motower

Gebruiker
Lid geworden
10 aug 2004
Berichten
472
Hoi,

Ik heb een extern style sheet en alles werkt prima. Maar ......
Als de links eenmaal bezocht zijn dan werkt de hover niet meer, in het begin wordt de link dus blauw als je erover heen scrollt, maar eenmaal bezocht niet meer.

Wie weet hoe dit komt?

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #006699;
text-decoration: underline;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
text-decoration: underline;
}
 
Het ligt aan de volgorde waarin je de code plaatst. Als je op de link hebt geklikt en je gaat weer over de link heen is de pagina nog al 'visited'.

Als je a:hover boven a:visited zet werkt het wel. Het is een beetje maf, maar op zich wel logisch.
 
zet nog helemaal onderaan

voorbeeld;

a:active {
color: #0F0;
}

en pas aan zoals 5i5 al aan gaf..en pas eigen kleuren toe , font fam. en grote zijn hier in de selector a opgenomen, mag ook zo als jij het deed.

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

a:link {
color: #000;
}

a:visited {
color: #00F;
}
a:hover {
color: #F00;
}
a:active {
color: #0F0;
}
 
Laatst bewerkt:
Mmmmmmm, ik snap het niet helemaal. de volgorde was al goed en ik heb er nu de "active" bij gevoegd maar het gaat nog niet helemaal goed. Wat inderdaad wel zo is dat de link reageert als zijnde bezocht, want nog niet bezochte links doen het wel.

Aangezien het de navigatie betreft (andere links hebben andere kleuren) heb ik nu:

#navigation a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF9900;
text-decoration: none;
}
#navigation a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #F90;
text-decoration: none;
}
 
dit is de volgorde (had het verkeerd gezien bij 5i5 ..hover moet onder visited, stond overigens hierboven goed.

a:link,
a:visited,
a:hover,
a:active,

(liever huisarst)


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>

<style type="text/css">
<!--
#navigation a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000;/*zwart  begin*/
text-decoration: none;
}

#navigation a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0F0;/*groen*  */
text-decoration: none;
}
#navigation a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF9900;/*oranje  mouse over */
text-decoration: none;
}
#navigation a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: ##FF9900;/*rood*/
text-decoration: none;
} 
-->
</style></head>

<body>
<div id="navigation"> 
<a href="#">link 1</a> 
 <a href="#">link 2</a> 
  <a href="#">link 3</a>
  
  </div>

</body>
</html>
 
Laatst bewerkt:
Ik heb de volgorde veranderd en ... het werkt! (gôh, dat het leven soms zo simpel kan zijn...)
Bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan