マウスを乗せたときと外したときでtransitionの内容を変える方法

以前、「CSSで画像リンクにマウスを乗せたときの動きを考えてみた」という記事の中で、擬似要素を作った半透明のボックスが左から右へすり抜けることで光っているような感じにしたものを紹介しました。

ここで紹介したサンプルではマウスを外したときに右にいったボックスが左に戻るわけですが、光るのはマウスを乗せたときだけの方がいいと思います。

当時はいい方法が思いつかなかったのですが、方法が思いついたので紹介します。

まず、そのときに紹介したのが下になります。

で、戻ってこないようにしたものが下になります。

マウスを外したときにtransitionさせないようにするには

a {transition: 1s;}と指定した場合はマウスを乗せたときも外したときもtransitionは適用されますが、a:hover {transition: 1s;}と指定した場合はマウスを乗せたときだけしかtransitionは適用されません。

右側はマウスを外した瞬間に元に戻りますね。

この仕組みを利用したわけです。hover側にtransitionを指定するという考えがなかったので当時は考えつきませんでした。

:hover有り無し両方に指定

では、:hover有り無しの両方でtransitionを指定した場合はどのようになるのか。下のリンクにマウスを乗せてみてください。

これは、a {transition: 1s;}、a:hover {transition: 3s;}という風に指定しています。この場合、マウスを乗せたときは3秒かけて変化し、マウスを外したときは1秒かけて元に戻ります。

ということで:hover有り無しの両方で「transition」を指定した場合、以下のようなことがいえます。

• :hoverなしはマウスを外したとき
• :hoverありはマウスを乗せたとき

反対ではないかと思われる方もいるかもしれませんが、:hoverありがマウスを乗せたときになります。

「CSSで作ったドロップダウンメニューのドロップの動きいろいろ」という記事で最後に紹介したパタパタ開閉するメニューはこの方法を使っています。

それを簡単にしたものを下に用意しました。Chrome、Firefox、IE10以上が対応しています。

• menu
  • submenu
  • submenu

マウスを乗せると上から開いて、マウスを外すと下から閉じます。transition関係だけ取り出すとCSSはこんな感じになります。

ul li ul li{
  transition: .2s;
}
ul li:hover ul li:nth-child(1) {
  transition-delay: 0s;
}
ul li:hover ul li:nth-child(2) {
  transition-delay: .2s;
}
ul li ul li:nth-last-of-type(1) {
  transition-delay: 0s;
}
ul li ul li:nth-last-of-type(2) {
  transition-delay: .2s;
}

transition-delayの値を、リストの順番やマウスを乗せたとき外したときで変えています。

さいごに

ということで、マウスを乗せたときと外したときで違うようにtransitionさせる方法を紹介しました。

擬似要素や:nth-child(n) などと組み合わせると複雑なアニメーションも可能になりますので、色々と面白いものが作れそうです。

意外と知らなかった人もいるのではと思ったので記事にしてみました。お役に立てばうれしいです。