[Home]Hover effect

HomePage | RecentChanges | Preferences | Newbie Help

Category CSS FAQ

A simple example, with a few more pseudo-classes thrown in. Put this in your HEAD section --

 <style type="text/css">
 a:link    {color:blue;  background:white;}
 a:visited {color:red;   background:white;}
 a:hover   {color:white; background:black;}
 a:active  {color:white; background:red;}
 </style>

Make sure to place :hover after :link and :visited, otherwise those rules will overrule :hover. For the same reason you should place :active after all the other rules. For more information, see

Adding text-decoration:underline or text-decoration:none will affect underlining. See remove underlines from links.

The :link, :active and :visited pseudo-classes were included in CSS1, :hover came in CSS2. As usual, not all browsers support all pseudo-classes; when in doubt, consult [Eric Meyer's Masterlist].

Also see http://www.teaink.com/netscapehover.htm specifically for Netscape.

That's a rather involved Javascript solution, though. IMHO it's not worth the trouble, a simple image rollover would be much easier to do. --Matthias

See Rollovers for quick-and-dirty image rollover coding.
Here's a text-based Rollover builder, but only for MSIE4+ and NS6, they say -- http://www.webreference.com/js/tools/rollovers/
also http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html --jerry


Comments --
HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited October 23, 2001 11:58 am (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media