Table of Contents

Hover-Links via CSS

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


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 }

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 }

Now you can assign it to a link:

<a href="" class="myclass">

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=""

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.