一般的に、マウスのロールオーバーによる画像の切り替えは、JavaScriptを使うのですが、
CSSのアンカー（<a>）の仕様を上手く利用してやれば、
CSSだけで実現可能です。
実際に、このサイトのナビゲーションメニューで使用しています。
このメニューの鍵は、用意する画像にあります。
例えば、このサイトのメニューの場合、青または橙に見えている部分は実は透過です。
透過に見えている部分は、実は背景色と同じ白。
そして、設定しているアンカーで、マウスが重なったときの背景色を変化させています。
CSS抜粋<style>
a:link{background-color:#000066;} # 通常のリンクの状態
a:visited{background-color:#000066;}
a:active{background-color:#ff6600;}
a:hover{background-color:#ff6600;} # マウスがリンクに乗った時の状態
</style>
種明かしをすれば非常に単純なことです。
しかし意外と分からないし、JavaScriptより遙かに簡単。
【応用編】
今回のような疑似文字色変化に加えて、
設定するCSSを、背景色ではなく背景イメージにして、
置く画像をそれに合わせた透明画像（Spacerなど）にしてやれば、
普通の画像によるロールオーバーも可能です。
← マウスを置いてください
コード例<style>
a:link {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;}
a:visited {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;}
a:hover {background:url(https://www.nobodyplace.com/img/icon/diary/51.gif) #ff6600;border:none;}
</style>
<a href=””><img src=”http://www.nobodyplace.com/img/spacer.gif” width=14 height=14></a>
これらを利用することで、多少はJavaScriptを減らすことが出来るのではないでしょうか。
（JavaScriptが悪いとは言いませんがユーザを選ぶことも事実なので）
もちろん、スイッチが画像以外にある場合や、より複雑な処理が必要な場合は、
CSSでは対処できません。
素直にJavaScriptに頼りましょう。
（個人的はそういう装飾は、避けますけど）