【CSS】スマホではホバーさせない簡単な方法

こんにちは、ワタナベです。

感染症対策の規制緩和が進んできて、またライブに行く機会が増えてきて心が潤っております(*´ω｀*)

今回は、メディアクエリでデバイスによってhoverスタイルを制御する方法の備忘録！

スマホではホバーを切るために@media (min-width: 768px) などを使用している方も多いのではないでしょうか？
私も使っています！

ですが、これだと画面サイズによってはスマホでもホバーのスタイルが適用されてしまいます。

スマホなどのタッチデバイスではホバースタイルを適用させたくない場合はどうしたらよいのか？
JSという手もありますが、CSSのみでも実装が可能です。
それがこちらになります！↓↓↓

▼SAMPLE

上のボタンがパソコンのみホバー適用、下のボタンがパソコン、スマホどのデバイスで見てもホバーが適用されています。

@media (hover: hover) を使用するとパソコン（マウスカーソルのあるデバイス）の時のみホバースタイルを適用してくれます。
是非パソコンから、スマホから違いを確認してみてください。

▼THANKS！

それではまた次回。

ご閲覧ありがとうございました♪