マウスオーバーでフェード効果の半透明、ふわっとを目指す(1)- CSSのみで

(適用したスタイル)
<style type="text/css">
a:hover img{
opacity:0.6;/* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";/* IE 8 */
-khtml-opacity: .60; /* Safari 1.x */
-moz-opacity: .60; /* FF lt 1.5, Netscape */
}
</style>

(注意)IEは、セキュリティーが「高」だったり、ActiveXが無効に設定してあったりするとopacityは無効となるらしいです。


(最初に適用したスタイル)
<style type="text/css">
a:hover img{
opacity:0.6;
filter: alpha(opacity=60);
}
</style>


画像を2枚用意しなくて済むが、ふわっとした感じでフェードはしてくれない。
あと、alpha(opacity=60);は指定がブラウザごとに違う

IE
alpha(opacity=透明度);
100が100%となる。25%の場合は、25


Firefox・Netscape
-moz-opacity:.透明度;
1.0が100%となる。25%の場合は、.25

Opera・Safari
opacity:透明度;
1.0が100%となる。25%の場合は、.25
※CSS3.0からは、opacity:透明度;の設定ですべてのブラウザで表示可能となるようです。

あと、もちろんリンクも付けられる。


(2)- jqueryを使う、へ移動

ホームへ戻る