Hartwork Project / binera.de / Hover-Links via CSS

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.

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 }

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="mailto:hover@hartwork.org" 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="mailto:hover@hartwork.org"

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.