実装者向けの記事です。

タッチデバイスでhoverスタイルを適用しない方法

ボタンなどで、マウスhover時にスタイルを変えるのは常套手段です。

が、スマホなどのタッチデバイスでは、この hover が期待通りに動作しない場合があります。

そんなときは、端末が「hover対応か否か」を判別するメディアクエリが有効です。

any-hover

「any-hover」は、端末が「hover」対応しているかどうかを判別するメディア特性です。

メディアクエリの書き方で、このように実装します。

@media (any-hover: hover) {
  a:hover{
     background-color: orange;
  }
}

@media (any-hover: none) {
  a{
     background-color: yellow;
  }
}

「any-hover: hover」は、hover 対応デバイス（PCなど）の場合、「any-hover: none」は、hover 非対応デバイス（スマホなど）の場合の処理となります。

・

タッチデバイスで hoverスタイルの動作がおかしい時の制御や、hoverで展開するアコーディオンメニューを最初から展開しておきたいときなど、hover まわりの処理に使えそうです。