読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

hover画像不要!cssだけでマウスオーバー時の変化を実現させる。


画像リンクのマウスオーバー時。
画像が切り替わると見栄えも良いし、ユーザビリティも高い。
cssでhover時に見える画像を切替えるのが一般的だが、
とはいえ、面倒なこともある。
特に更新記事などの見出しリンク画像なんて、
毎回丁寧に平常時とhover時の画像を作ったりしてられない。
というわけで、そんな時用のcssを発見・取得。
cssで画像の透明度を変えて、ロールアップ時の見え方を変える方法。
これなら画像一個で良いし、いちいち設定もいらない。
さらに透明度はcssで変更できるのでサジ加減も自由自在。
素晴らしい。
sample.gif
一応、IE6~8、chromefirefoxには対応している模様。
以下、スタイルシートのソース。

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