Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks 4.95/mo
Globat $4.44/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
CSS: CSS Links, < a > and Hover
So you've seen a terrible way to use hover, and a pretty good way to use hover. The three most common ways people use hover are as follows:
- Add an underline on a link without an underline on hover
- Remove an underline on a link with an underline on hover
- Add a background color to the link on hover (possibly in combination with either method above, or even alone.)
So this should be simple enough. To add an underline, your style could look like this:
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
To remove an underline, your style could look like this:
a:link { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
To change the background-color, simply add it inside :hover (and :active if you'd like):
a:link { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:hover { text-decoration: none; background-color: #DDDDDD; }
a:active { text-decoration: none; background-color: #DDDDDD; }
Want to test your skills? Try making a link that is red without an underline before it is clicked, and blue with an underline when the mouse hovers it. (Remember underline is a text-decoration from the text chapter.)
Click here if you get stuck or if you want to see how I did it.
| < Ch. 6 part 1 | > continue to Chapter 7 |
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo
Free Domain Name If you Order Today!