July 20, 2004

Newbie HTML/CSS tip: It's common practice to have links change in appearance when the mouse pointer is over them, indicating that they are clickable. This is often accomplished using CSS, such as:

  A { color: #0000CC; }
  A:hover { color: #CC00CC; }

This idiom has the unfortunate side-effect that other uses of the <A> tag, particularly "name" anchors, also have the hover effect in some browsers. Internet Explorer does not apply the hover effect to A's that aren't links, so this mistake is often overlooked. Prior to CSS2, there hasn't been a good solution.

To apply the hover effect to links only:

  A:link:hover { color: #CC00CC; }

Of course, <a name="..."> is now deprecated. In most newer browsers, any section with an "id" can have the ID used as the anchor:

  <a href="#section1">
  ...
  <h3 id="section1">

Support for older browsers may require continued use of <a name="section1">, but only a few of those browsers would honor CSS anyway.