Styling Hyperlinks: Change colors on mouseover
Styling hyperlinks could be used effectively to replace the old style navigation buttons.To create this effect we style the :hover and :active pseudo-classes of the anchor tag. Am gonna define style separatley one for the :link and :visited styles and other for :hover and :active
Personally I like the hyperlinks to appear in a contrasting color to the page background by default, with a dotted underline, and on hover I would like to change the text-color so that it appears highlighted.
CSS code:
body{
background-color: #171717;
}
a:link, a:visited{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#fff;
}
a:hover, a:active{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#4eb5e1;
}
and the html looks like this
and on mouse over the links looks like this.