This is BrainLog, a blog by Dan Sanderson. Older entries, from October 1999 through September 2010, are preserved for posterity, but are no longer maintained. See the front page and newer entries.

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.