CSSによるロールオーバー

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

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

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

とやる方法。

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

とやる方法。

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

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

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

トラックバックURL

CSSによるロールオーバー」への2件のフィードバック

  1. けん♪ より:

    制作会社の方々でこんなHP作ってらっしゃってるんですね。

    たまたま見つけたのですが、凄く勉強になってます。
    ありがとうございます。 :otukare:

    私はa:hoverでやってますね。。
    CSS SPRITEも。

  2. Yu-ichi より:

    >けん♪さん
    初めまして :neko:
    コメント有難う御座います。

    CSS SPRITEは便利ですね!
    あまりまとめすぎると座標指定が大変ですが。。

    これからもちょっとしたテクニックをご紹介していきますので宜しくお願いします。