• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 16. Creating Horizontal Navigation > 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;
}


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint