[IE6対応]簡単にCSSだけでやる画像のロールオーバー（手抜きです）

デザイナーから上がってきたPSDを開くとロールーオーバーしたときのレイヤーがない人いません？ そういう人はいつもない。ない人はいつもない。そんなもんです。 俺「これどうすんの？」デザイナー「テキトーに作っておいて」（すでに別の案件に入っている）

じゃあテキトーにやってやろうじゃねーか。という手抜きです。

htmlとCSSのソースサンプルは下記です。 基本的に、画像に大してロールオーバしたさいに、画像の80%透過しているだけです。

メリット

• 楽チン（大事です）
• １枚の画像でやるのでhoverのときにチラつかない。
• IE対応

デメリット

• 「濃く」はできない。
• エリア全体が薄くなる。

HTML

<a href="#"><img src="hoge.jpg" class="alpha"></a>

CSS

a:hover img.alpha{
    -moz-opacity:0.8;
    opacity:0.8;
    filter: alpha(opacity=80);
}

DEMO

もちろん時間があれば、ちゃんとロールオーバ用のCSSを用意した方がいいと思います。