マウスオーバー時の処理（CSS)

（１）マウスオーバー時の透過処理

　「opacity」プロパティを「要素：hover」内に追記

　　（例）

a:hover {opacity: 0.5 ;}

（２）透過時間の指定

　「transition」プロパティを要素タグ内に追記

　　（例）

a{transition: 1.0s ;}

-------------------------------------------------------------------------------------

（１）＋（２）を追記するとマウスオーバー時に１秒かけて50％透過処理が走る。

これに背景色や文字色の設定を加えるとイマドキっぽくなる。

-------------------------------------------------------------------------------------

（３）記載時の注意

　CSSに記す要素のうち、「link」「visited」「hover」「active」は、
　　link:
　　visited:
　　hover:
　　active:

　の順で書かないと、CSSに反映されない。

　実際には「a」タグとしてまとめてCSSで定義していることが多い様子。

　（例）

a{color: red ;}

（４）スマホの場合

　スマホ等の指タッチの端末は、「hover:」の設定が表現されるより前にリンク先ページにジャンプしたりと

　マウスクリックと同じ動作が出ない（と感じる）方が多いため
　あまり細かい所まで組み込めない。

　その代わり、タップ時のリンクテキストハイライトが設定できる。
　（-webkit-tap-highlight-color: rgba(x,x,x,x)）

【出典】
https://lab.syncer.jp/Web/CSS/Snippet/8/