CSSによるロールオーバー

こんにちわ。Yu-ichiです。

CSSでロールオーバーを記述するときに、どちらのやり方がメジャーなのでしょうか？

１つは、ロールオーバー前とロールオーバー後の画像を縦または横に並べて、
　　a {background-image:url(ほにゃらら～/before.gif);}
　　a:hover {background-position:0 -40px;}

とやる方法。

２つ目は、ロールオーバー前とロールオーバー後の画像を別に用意し、
　　a {background-image:url(ほにゃらら～/before.gif);}
　　a:hover {background-image:url(ほにゃらら～/after.gif);}
とやる方法。

どちらも一長一短があるのですが・・・。

他にもjavascriptを使う方法などがありますが、
なるべくスクリプトには関わりたくないので・・・

これ以外にも、CSSだけでこんなやり方があるぞ！
というのがあれば、教えてください。
できれば実用的なもので