opacityを使ったCSSによる透明度の設定で、ロールオーバーのように見せかけることも可能です。
Chrome最新/IE6-8/Firefox最新/Opera最新/Safari最新で確認済み。
プロパティ | 対応ブラウザ |
---|---|
opacity | モダンブラウザ全般(通常の指定) |
filter | IE7以前対応 |
-moz-opacity | FF1.5以降対応 |
-ms-filter | IE8以降対応 |
opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; -ms-filter: "alpha(opacity=70)";
数字はそれぞれ%として解釈されるので、
これだとロールオーバー時に70%になります。
p.bnr a:hover img { opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; -ms-filter: "alpha(opacity=70)"; }
と設定することでロールオーバー時に色を薄くできます。
バナーなどでロールオーバー画像を用意する手間が省けます。
p.bnr a:hover { opacity: 0.70; filter: alpha(opacity=70); -moz-opacity: 0.70; -ms-filter: "alpha(opacity=70)"; }
という風にimgを省いてしまうとIE6で動きませんので注意してください。
1件のコメント