cssでロールオーバー

かつてロールオーバーって、javascriptでしか実現できないかと思っていました。
しかし、CSSでかなり簡単に実現できると知って、
実際使ってみて、かなり幸せになりました（笑）。

ロールオーバー前と後の画像を一枚でまとめるて遷移させる手法が、自分の好みです。

縦30pxのボタンなら、上下に30px+30px=60pxの一枚続きの画像に仕立て、
それを配置して、a:hoverにてbackground-positionを-30pxとかしてやるという手法で。

最初の頃、javascriptを各ページのヘッダーに自動生成して書いてくれる某ソフトを使っていたのですが、
ソースがぐちゃぐちゃになってしまい、弱っていました。

ですので、スタイルシートでロールオーバーをこんなにシンプルに実現できるのが、うれしい限りです。素晴らしや。
（もちろんjsでも外部にソースをもっていってリンクはれば見すくなりますが、その当時は知る由もなく。。）