This example demonstrates how to add other styles to hyperlinks.
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
a.one:link {color:#ff0000;} /* unvisited link in red */ a.one:visited {color:#0000ff;} /* visited link in blue */ a.one:hover {color:#ffcc00;} /* hover in orange*/ a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;} /* hover in bright green*/ a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:monospace;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> <body> <h1>HOVER (Do not click the links)</h1> <p>All unvisited links will be in red, while visited links will be in blue.</p> <p>The purpose of this demonstration is for users to watch the transformation whenever the mouse hovers over the links.</p> <p><b><a class="one" href="text_hey.html" target="_blank">This link changes color</a></b></p> <p><b><a class="two" href="text_hey.html" target="_blank">This link changes font-size</a></b></p> <p><b><a class="three" href="text_hey.html" target="_blank">This link changes background-color</a></b></p> <p><b><a class="four" href="text_hey.html" target="_blank">This link changes font-family to a monospaced font</a></b></p> <p><b><a class="five" href="text_hey.html" target="_blank">This link changes text-decoration, by adding an underline.</a></b></p> </body> |
HOVER (Do not click the links)All unvisited links will be in red, while visited links will be in blue. The purpose of this demonstration is for users to watch the transformation whenever the mouse hovers over the links. This link changes background-color |
I once put a large font-size on my hover links. Not a bright idea! If the link is in a paragraph, the hovering can shift the paragraph's contents, to make room for the larger font. This gives a weird sensation to the whole webpage, which was not pleasing. It appears that some font-families (like the monospaced font used in this example) could have the same effect.