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

Figure 15.4. Screenshot of list showing hover.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net