CSSのホバーを工夫するようになった話

コーディング

スマホは大きければ大きいほどいい派のコーダー、オガワです。
（機種変をするたびに大きくなってます笑）

スマホの普及率が上がったことで、スマホ優先のサイトも増えてきましたよね！
私自身も作る頻度が上がってきたことを感じているのですが…
その時、ちょっと気になるのがホバーの動き。

今回はそのホバーを工夫するようになった話をしたいと思います！

:hoverのみだと実機でちょっと不恰好に感じる

PCのコーディングをする時、リンクやボタンの要素に「:hover」でホバー（マウスオン）の動きを入れることが多くありませんか？
スピカデザインでも、押せる要素を作る時には必ず何かしらのホバーを入れてください、としています。
ホバーの動きをつけることで、PCでは押せる要素がわかりやすく綺麗なサイトに仕上がります！
では、それをスマホの実機で見た時はどうでしょう？

そのままタグに「:hover」で動きをつけると、遷移前に若干不透明度が下がったりボタンの矢印が微妙に動いたり…
変化速度が早い場合はあまり気になりませんが、ゆっくりと動かしている場合は「なんか微妙に動いたな…？」という感じになってしまいます。
最近それが不恰好だなと感じるようになったので、狭い幅ではhoverを切るようにしたのですが、一つ一つ切るのは結構な手間。
もっと楽な良い方法はないか？と調べてみました。

見つかったいい記述方法

色々調べたところ、なんとメディアクエリにホバーのみという書き方がありました！

@media (hover: hover) {
   transition: 0.5s;
   &:hover{
       opacity: 0.5;
   }
}

このように書くと、「ホバーができる場合のみ」という指定をすることができます。

普段メディアクエリを書くのはレスポンシブの幅の指定のみのことが多かったので、今はホバーの判定までできるようになったんだ！とちょっと感動しました！笑
メディアクエリの中にホバーの動きを書くことで、ipadやスマホのタッチデバイスの時には書いた指定が効かないので、変に不透明度が下がったりアニメーションがついてしまうことはありません。