【CSS】transitionの入れ先を間違うと、思った通りに動かない件 hover編

transitionでマウスオーバー時に動きを付けたけど、カーソルを離したときにアニメーションが掛からない

今回はこの症状が起こる原因と解決方法を解説します。

Contents

症状の確認
カーソルを離すと一瞬で戻ってしまう原因と解決方法
おわりに

症状の確認

本来は下のように、ボタンの上にカーソルを乗せるとフワッと明るくなり、カーソルをボタンから外すとフワッともとに戻る動きにしたい。

See the Pen Untitled by DoGgy (@DoGgy12) on CodePen.

でも、何故か下のような動きに…。

See the Pen Untitled by DoGgy (@DoGgy12) on CodePen.

カーソルをボタンの上に乗せた時はフワッと明るくなるのに、カーソルをボタンから離した時は一瞬でもとの明るさに戻ってしまっています。

一体なにが原因なのでしょうか？

カーソルを離すと一瞬で戻ってしまう原因と解決方法

この挙動の違いですが、CSSで「transition」を記述するクラスの違いで発生します。

・ふわっと戻る場合

.btn {
  background-color: #5a4498;
  color: white;
  display: block;
  width: 210px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  transition: .5s;  /* .btn の中に記述 */
}

.btn:hover {
  background-color: #ae9ae5;
}

・一瞬で戻ってしまう場合

.btn {
  background-color: #5a4498;
  color: white;
  display: block;
  width: 210px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  background-color: #ae9ae5;
 transition: .5s;   /* .btn:hover の中に記述 */
}

「.btn」にtransitionを記述 ⇒ フワッと戻る
「.btn:hover」にtransitionを記述 ⇒ フワッと戻らない

ご覧の通り、transitionを「:hover」要素ではなく、その親要素に記述すれば解決です。

おわりに

初学者の方は地味につまづく部分かと思ったので記事にしました。

誰かのお役に立てたのなら幸いです！

それではまた。