リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法

2018-10-29 691 1756

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。
BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。

さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。
まずはclassにtransition（切り替える時間）を指定します。
hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。

.hover-slow{ transition: 0.5s;}

.hover-slow:hover{ opacity:0.7;}

あとは、ホバー時に変化させたい画像やリンクのタグににclassを付けるだけ。

<div id="pagetop"><a href="#"><input type="button" value="送信" class="hover-slow"></a></div>



<div class="btn-back"><a href="/" class="hover-slow">トップに戻る</a></div>

現在普及しているブラウザがtransitionにしっかり対応しているので、ずいぶんと簡単になりましたね。
かなり古いネタですが、最短の方法を見かけなかったので。