Styling the :hover Pseudo Class

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; } 

Figure 16.4. Screenshot of finished list.