バートリーのさいとうです。
今回は
【css】hoverする時だけtransitionを変更する方法とは？
について解説していきます。
青い箱にマウスを乗せてみてください。
See the Pen ExWpaKO by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
このように、:hoverを利用すると、マウスが乗る時にだけopacity=透明度がかかることになります。
今回は、プロパティの効果がどのくらいで適応されるのか？（主にhoverや移動系の
プロパティと一緒に使われる）を指定できるtransitionについて、
hoverする時だけtransitionをかける方法について説明します。
なかなか使わない技術ですが、この違いがわかることで
- transitionを付与する場所によって、その効果がどこまで適応されるのかを理解することができる。
と思います。
transitionだけに限らず様々なプロパティに活用できますので、ぜひ最後まで読んでみてください。
結論:hoverのプロパティとしてtransitionをかける
早速実際の様子をご覧ください。
青い四角にカーソルを乗せて2~3秒待って下さい。
See the Pen hoverのtransition by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
このように、:hoverのプロパティにtransitionをかけると、:hover=マウスが青い四角に乗る時にゆ〜っくり
opacityの効果が現れることを確認できると思います。笑
一方で、マウスを四角の上から外すと、スッと色が元に戻りますね。
このように、:hoverだけにtransitionをかけることで、マウスオーバー（マウスが乗っかるタイミング）だけにtransitionの効果を付与することができました。
通常のセレクタにかけると全てのタイミングで適応される
もちろん、マウスオーバーとマウスアウトの両方のタイミングでtransitionをかけることも可能です。
先ほどと同じように、四角の上にカーソルを合わせて下さい。じんわりと色が変わったのを確認したら、かーソルを四角から外して下さい。
See the Pen qBryEmz by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
じんわりと色が戻ったと思います。
先ほどのコードとの違いは、transitionの位置です。
.btnというセレクタ＝元のセレクタにtransitionをかければ、hoverの時だけではなく、マウスアウトのタイミングにもtransitionの効果を適応させることができます。
こういうこともできます。
こちらの例を、先ほどの「hoverだけにtransition」という風に変更してみましょう。
こうなります。
See the Pen jOBpEYZ by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
まぁ使わないでしょうが、こういうこともできるし、もしこうなっていたら「あ、プロパティをかける位置が違うんだな」と思うこともできるでしょう。
まとめ
いかがだったでしょうか。
このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。
誰かのためになれば、嬉しいです。
最後まで読んでいただき、ありがとうございました。
それでは。
