cssでメニューのマウスオーバー時に透明度を変更させたいとき

投稿者: | 2008年11月10日

メニューのマウスオーバー時に透明度を変更させたいとき
三種類の指定をすることにより、IE、Safari、Opera、Firefox、Netscapeに対応。
マウスオーバー用の画像を作らなくても、擬似的に画像を変更した感じにできるから簡単。

当然、透明度を変更するから、背景に画像を敷いている場合は背景が透けてしまう。
その場合はメニュー部の下地に白のバックカラーを流しておくといい。

cssで半透明指定のサンプルスタイルシート

.menu a:hover {
    /* IE */
    filter: alpha(opacity=25);
    /* Safari Opera */
    opacity:0.25;
    /* Firefox Netscape */
    -moz-opacity:0.25;
}