Sams Teach Yourself CSS in 10 Minutes

Styling the :hover Pseudo Class

Finally, the :hover pseudo class is used to change the style of links when they are rolled over. In this case, you will set the background to #69C and the color to #000 as shown in Listing 16.12 and illustrated in Figure 16.4. These colors can be changed to suit your needs.

Listing 16.12. CSS Code Setting a Hover

ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none; background: #036; float: left; width: 100%; } ul#navigation li { display: inline; } ul#navigation a { display: block; float: left; padding: .2em 1em; text-decoration: none; color: #fff; background: #036; border-right: 1px solid #fff; } ul#navigation a:hover { color: #000; background: #69C; }