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

2018-10-29
マウスホバーは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にしっかり対応しているので、ずいぶんと簡単になりましたね。
かなり古いネタですが、最短の方法を見かけなかったので。
カテゴリ: CSS