リンク画像をonmouseを使わずにcssで変化させるTips

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

リンクになっているバナーなどの画像を簡単にonmouseで変化させたい時のちょっとしたTipsです。

マウスオーバーで切り替えたいとき、
普通は画像を別途用意してjavascriptのonmouse処理を使って切り替えます。
でもやんごとない事情で画像を用意できない時もあります。
それでも変化させたい！
そんな時はcssで透明度を指定することで
あたかもonmouse属性を使っているかのようなフリをすることができます。

cssは簡単。
a:hover img {
    filter: alpha(opacity=75);
    opacity:0.75;
}

これだけ。
数字はゼロに近づくほど透明になります。
画像を半透過させることで変化をつけているので、
背景に柄があったり背景色と混ざってへんな色になったり、
そもそも画像の一部だけ変化させたいということには対応できませんが
画像が用意できないなど取り急ぎ必要なときにはちょっと使える小技です。