Web Development

Fun with Hover Link Text

Fun with Hover Link Text

To have fun with links when the cursor hovers over the text, put this into the HEAD area of your web page:

<style type="text/css"><!--
a:link {
   text-decoration: none;
   }
a:hover {
   color: red;
   background-color: yellow;
   text-decoration: underline overline;
   }
--></style>

The above removes any underline from links. But when the cursor hovers over links, the link text obtains a red text color, a yellow background, an underline, and an overline.

The color names may be replaced with the hexadecimal number for the desired color. "#000066" (without the quotes), for example.

About the author

Written by Will Bontrager.

Publication: WillMaster Possibilities

If you found this post useful you may also want to check these out:

  1. Cascading Style Sheets (CSS); Getting Started
  2. Making Your Own Layered Sub-Menus
  3. Cascading Style Sheets (CSS); Learning More
  4. CSS & Round Corners: Making Accessible Menu Tabs
  5. Text::Autoformat: Smart Text Reformatting with Perl
  6. Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)