Adding a Hover Effect

Adding a Hover Effect

The :hover pseudo-class can be 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 15.12. The results can be seen in Figure 15.4. These colors can be changed to suit your needs.

Listing 15.12. CSS Code for Setting Hover

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

ul#navigation a
{
    display: block;
    text-decoration: none;
    background: #036;
    color: #fff;
    padding: .2em .5em;
    border-bottom: 1px solid #fff;
    width: 7em;
}

ul#navigation a:hover
{
    background: #69C;
    color: #000;
}