Through The Lens

A Photographers Blog

Styling Hyperlinks: Change colors on mouseover

October1

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

styling hyperlinks

and on mouse over the links looks like this.

styling hyperlinks hover

Email will not be published

Website example

Your Comment: