[ CSS ] opacity を使ってロールオーバーもどき

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

CSS でロールオーバーもどき と言う記事を読んで、早速試してみました。これは良い！CSS の opacity と言うプロパティで不透明度をコントロールするんだそうです。

従来の方法 ( JavaScript + Fireworks でロールオーバー用の画像を用意 ) でロールオーバーさせる場合、

• ロールオーバー用の画像はボタンの明るさぐらいしか変えない。( 私の場合 )

• body タグでロールオーバー用の画像をプリロードさせるのが邪魔臭い。

なんて所が嫌だったんですよねー。

サンプルソース

HTML ソース

<a href="#"><img src="button.png"></a>

CSS ソース

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

opacity は不透明度を操作 ( 0 – 1.0 ) するプロパティなんですが、Internet Explorer は opacity プロパティに対応していないので、filter を使い不透明度を操作するんだそうです。

表示サンプル

https://codepen.io/darucub/pen/JoXoqWa

動作確認したブラウザ

• OK – Mac Safari 2.0

• OK – Mac Firefox 2.0

• OK – Mac Opera 9.2

• NG – Mac Internet Explorer 5.2

• OK – Windows Firefox 2.0

• OK – Windows Internet Explorer 6.0

雑感

• 調べてみると -moz-opacity と言うプロパティもあるみたいなんだが、これは何？

• 大変便利なので、この手法をどんどん使って行こうと思うんだが何かしらの問題はないのだろうか？

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。