(適用したスタイル)
<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:透明度;の設定ですべてのブラウザで表示可能となるようです。
あと、もちろんリンクも付けられる。