[IE6対応]簡単にCSSだけでやる画像のロールオーバー(手抜きです)
デザイナーから上がってきたPSDを開くとロールーオーバーしたときのレイヤーがない人いません? そういう人はいつもない。ない人はいつもない。そんなもんです。 俺「これどうすんの?」デザイナー「テキトーに作っておいて」(すでに別の案件に入っている)
じゃあテキトーにやってやろうじゃねーか。という手抜きです。
htmlとCSSのソースサンプルは下記です。 基本的に、画像に大してロールオーバしたさいに、画像の80%透過しているだけです。
メリット
- 楽チン(大事です)
- 1枚の画像でやるので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を用意した方がいいと思います。