マウスオーバーした時に対象の要素の色を不透明にする

【概要】特定の要素をマウスオーバーした時に色を不透明にする方法をまとめたドキュメントです。マウスオーバーした対象の要素のみが霞んだように反応する為、リンクだと直感的にわかりやすいと思います。画像イメージとソースを記載しているので参考にしてみて下さい。【詳細】[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タグに書くなど、適宜合わせて使用してみて下さい。