Hover Changes Border

When a cursor hovers over a text link, the text may display different attributes. The hover attributes might be color or font change, or underlining appearing or disappearing.

This article shows how to change borders around link text when the cursor hovers over it.

Here is an example.

When the mouse hovers over any of those links, the border changes from double ruled blue to dotted red. (Older browsers that don't support the "dotted" property may render a dashed border, instead.)

Each link has 4 states.

1. link (unvisited)
2. visited (link has been visited)
3. hover (mouse is hovering over link)
4. active (link is active; i.e., getting the next page)

Each state can have its own borders. In the example, the link and visited states both have a double blue border. The hover and active states both have a dotted red border.

To make your own border changing links, create a div within which the links are published. The div needs a unique id value.

In the example, the id value is "example".

<div id="example">
<a href="//www.willmaster.com/">Home</a> &nbsp; 
<a href="//www.willmaster.com/library">Library</a> &nbsp; 
<a href="//www.willmaster.com/blog">Blog</a> &nbsp; 
<a href="//www.willmaster.com/software">Software</a>
</div>

Next, put the CSS on the page (or in the external style sheet).

The example CSS assumes the link div's id value is "example" (as above).

<style type="text/css">
#example a:link { 
   padding:0 5px 0 5px; 
   border:3px double blue; 
   }
#example a:visited { 
   padding:0 5px 0 5px; 
   border:3px double blue; 
   }
#example a:hover { 
   padding:0 5px 0 5px; 
   border:3px dotted red; 
   }
#example a:active { 
   padding:0 5px 0 5px; 
   border:3px dotted red; 
   }
</style>

Define the classes in the order given in the example.

a:link and a:visited may be switched. But a:hover must come after those two. And a:active must come after a:hover. See CSS Pseudo-classes at the w3schools website.

The classes may contain color, font-size, and other elements, in addition to the padding and border elements in the example.

That's all there's to it. The borders change when the cursor hovers over the links.

Will Bontrager