CSS text rollovers (change the word on rollover)

I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks.

It depends on if you want exactly the same thing to happen, or if you want different text/ different coloured text displayed. If you wanted it the same, just repeat for all the links, if you wanted it for different text and CSS you could pass variables through the parentheses in the function: