Table of Contents

Hover-Links via CSS

Hover links are links that do not reveal their link identity until you touch them.

Example: hover@hartwork.org

Now it's time to decide whether you want to hoverize all links or just a few.

All links

In order to convert all links to hovers you have to modify the <a> tag in the header - between <head> and </head> - by using Cascading Style Sheets (CSS):

<style type="text/css">
  a:link { text-decoration:none }
  a:hover { text-decoration:underline }
</style>

Single links

To be able to modify single links you have to define a new class first. After this you can assign it to a link. The class definition is placed in the header again:

<style type="text/css">
  a.myclass:link { text-decoration:none }
  a.myclass:hover { text-decoration:underline }
</style>

Now you can assign it to a link:

<a href="mailto:hover@hartwork.org" class="myclass">
  hover@hartwork.org
</a>

The wrong way

I have to admit that I created hover-links in a different, complicated way some time ago. This way is not a real alternative. My idea was to work with the events onmouseover and onmouseout.

This would result in the following code:

<a href="mailto:hover@hartwork.org"
    onmouseover="style.textDecoration='underline'"
    onmouseout="style.textDecoration='none'"
    style="text-decoration:none">
  hover@hartwork.org
</a>

The mass of code for ten text-only links reveals the disadvantages of this mothod. Nevertheless it can be of great use for implementing Dynamic Images.