要素をhoverしたときに、色が変わるリンクなどがあります。これをスマートフォンなどのタッチデバイスで実行すると、「タップ後に違う要素がタップされるまでそのスタイルが反映され続ける」など、意図しない動きになってしまうことがあります。

また、hoverでナビゲーションが開くよう実装した場合も、タブレットやスマホでは期待通りに動作しない場合があります。

そのため、タッチデバイスでは指定を効かせないかPCとスマホで表示を切り替える必要があります。それを実装できるのが、メディア特性のany-hoverをつかった方法です。

any-hoverとは

any-hoverとは、複数の入力デバイスがある場合、hoverが利用できるデバイスかを判定するメディア特性です。

指定は簡単です。@media (any-hover: hover) や@media (any-hover: none)の中に実装したいコードを書くだけです。

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

上記のように、@media (any-hover: hover)を実装したらどうなるかをご覧ください。
※表示されない場合は「Result」を押してご覧ください。

See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.

PCで見た場合はhoverができますが、スマホではhoverが効いてないのが分かります。

スマホとPCで切り替えしたい場合の記述は以下です。

• 例として、PCではナビゲーションメニューをhoverで表示、スマホでは最初から表示にします。
• 切り替えの書き方は、@media (any-hover: hover)にhoverした時のCSSコード、@media (any-hover: none)にhoverなしのCSSコードを書きます。

@media (any-hover: hover) {
  ul{
     max-height: 200px;
  }
}

@media (any-hover: none) {

*スマホ用　切り替えたい内容を記述*/
ul{
     max-height: 0;
  }
}

See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.

@media screen and (min-width:480px)などで対応する方法もありますが、この方法ですとスマホやタブレットと小さなディスプレイサイズのデスクトップでは見分けがつかない場合があります。

スマホとPCにおけるhoverを使用した色の変更や、hoverでナビゲーションが開くような実装の切り替えは、上記の書き方がお奨めです。