TIP 128: Creating CSS Text Rollovers

You know the effect where you mouse over a text link and the text changes color, or even the background of the link changes color? If you guessed this is done with CSS, you're on the road to great Web wisdom and success. Be aware that this CSS rollover effect may not work in older browsers, but the links themselves will work just fine.

Follow these steps to create CSS text rollovers:

1.	Open your style sheet (internal or external) in the CSS Editor.
2.	Add an element style for the a:hover element by selecting it from the New Element pull-down menu on the right side of the CSS Editor window, as seen in Figure 128a. Figure 128a. Select a:hover from the New Element pull-down menu.
3.	With the a:hover rule selected on the left side of the window, change the text color in the Font Properties tab of the CSS Editor, as seen in Figure 128b. This will be the color of the text when you hover your cursor over the text link. Figure 128b. Change the color of the rollover text in the Font Properties tab of the CSS Editor.
4.	If you also want to change the background color of the text link, edit the Back(ground) Color field in the same tab of the CSS Editor.

Now all pages that use this style sheet will have this new rollover effect on text links. To test the effect, switch to Preview mode (see Tips 9294 for more about previewing) and hover your cursor over the text links in your page (Figure 128c). Voila!

Figure 128c. This simple navigation bar shows the CSS rollover effect in Preview mode.