Приглашаем посетить
Культурология (cult-lib.ru)

Styling the :hover Pseudo Class

Previous Page
Table of Contents
Next Page

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.

Styling the :hover Pseudo Class



Previous Page
Table of Contents
Next Page