メニュー(リスト)の画像をカーソルオン時にロールオーバーする

テンプレートと呼ぶほどじゃないですが、CSSで最初にやってみたくなるテクニックの一つである、javascriptを使わずにCSSのみでロールオーバーを実現する方法をサンプルを交えてご紹介です。 簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画像を指定して上げます。 a { background:url(hoge.gif) no-repeat; } a:hover { background:url(hoge_on.gif) no-repeat; } ↑のように。 ただ、コレだけだとa要素はインライン要素なのでブロック要素に変えてあげなきゃいけません。 簡単に言うと、そのテキストのある部分にしか適用されないので、マウスカーソルを合わせたときテキスト部分しか反応されなかったり、背景画像が全部表示されなかったりするので、ちゃんと「っぽく」してあげます。 a {