【概要】

特定の要素をマウスオーバーした時に色を不透明にする方法をまとめたドキュメントです。

マウスオーバーした対象の要素のみが霞んだように反応する為、リンクだと直感的にわかりやすいと思います。

画像イメージとソースを記載しているので参考にしてみて下さい。

【詳細】

[opacityの説明]

0.0 〜 1.0 までの設定値で不透明にします。

0.0が完全に不透明になり、何も表示されていないようになります。

1.0が完全に透明で、何も変化がありません。

自分としてはリンクとして反応しているとわかるレベルは0.7だと考えているので、ここで記述する例では0.7を設定します。

[opacityのイメージ]

先ずopacityの設定が1のイメージ画像です。

つまり、完全に透明な場合の表示です。

上記の完全に透明にopacity1に対して下記のイメージ画像はopacityの設定を上から0.7, 0.5, 0.3, 0.1, 0と設定しています。

徐々に不透明となり、0は何も表示されていないように見えます。

[opacityの設定方法]

・全リンク（aタグ）に対して、マウスオーバーした際に反映させる

a:hover {
  opacity: 0.7;
}

「a:hover」の全リンク設定ではなく、クラスを指定して設定や直接HTMLタグに書くなど、適宜合わせて使用してみて下さい。