リンクやボタンなどに対してCSSでhoverを設定する場合、すべてのデバイスに一律で適用してしまうと、スマホやタブレットではタップ後もhover状態が残ってしまったり、2回タップしないと反応しないといった不具合が発生してしまうことがあります。
そのためhover設定はPCのみ（スマホやタブレット以外）を対象としたいときの設定方法について、4つのステップを踏みながら、あらためて考えてみたいと思います。
Step1
まずはMedia Queryによって横幅1024px以上のデバイスのみに実装してみます。
※pxの数値はあくまでも一例です。
.hoge {
@media (min-width: 1024px) {
&:hover {
color:red;
}
}
}
しかし数えきれない種類やサイズのデバイスが巷にあふれかえる昨今、横幅だけで判定してしまうのは、いささか大雑把でこころもとない感じがします。
Step2
メディア特性のhover特性を使えば、対象デバイスがhover可能か否かを判定できます。
※ついでにmixinにします。
// mixin
@mixin hover {
@media (hover: hover) {
&:hover {
@content;
}
}
}
// 使用例
.hoge {
@include hover {
color: red;
}
}
Step3
pointer特性を利用すれば、マウスなどの正確性のあるポインターデバイスを使用しているか否かも判定でき、さらに対象デバイスの絞り込みの精度をあげることができます。
@mixin hover {
@media (hover: hover) and (pointer: fine) {
&:hover {
@content;
}
}
}
Step4（完成）
IE11に対応しなければならないケースもまだあると思います。
しかし残念ながらIE11はhover特性に対応しておりません。
今回はJavaScriptを使わずにCSSだけで完結したかったので、-ms-high-contrastというIEにしか対応していないメディア特性を利用します。
ユーザーが高コントラストモードをオンにしている場合も考慮して、オンオフ両方（none,active）をフォローします。
実はこのメディア特性はIEだけでなくEdgeにも適用されてしまうのですが、Chromium版Edge（2020年1月〜）からは適用されないので、Edge最新版だけを動作対象としている場合は問題ないかと思います。
@mixin hover {
@media (hover: hover) and (pointer: fine) {
&:hover {
@content;
}
}
// for IE11
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
&:hover {
@content;
}
}
}
まとめ
接続された複数のデバイスの中に少なくとも一つ以上該当するものがあるかどうかを判定するany-hover,any-pointerというメディア特性もあります。
しかしタッチスクリーンにペンタブをつないでいるような場合、ユーザーがタッチするのかペンを使うかまではわかりませんし、ここからは**「沼」の予感**がいたしましたので、今回はとりあげませんでした。
また機会（と興味）があれば調査してみたいと思います。
mixinにしておけば実装も楽になり、効率アップするのでおすすめです。
おまけ
今回とりあげたメディア特性についての補足です。
hover: hover
キーワード値：none, hover
hover - CSS: カスケーディングスタイルシート | MDN
CSS の hover メディア特性は、第一の入力機構が要素の上でホバー (停止) することができるかどうかを検査するために使用することができます。
pointer: fine
キーワード値：none, coarse, fine
pointer - CSS: カスケーディングスタイルシート | MDN
pointer は CSS のメディア特性で、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べます。
-ms-high-contrast
キーワード値：none, active, black-on-white, white-on-black
-ms-high-contrast - CSS: カスケーディングスタイルシート | MDN
CSS のメディア特性で、 Microsoft 拡張であり、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。
参考サイト
https://dev.opera.com/articles/media-features/
https://zenn.dev/tak_dcxi/articles/2cc1828e9c1fe2
https://blog.tomoyukikashiro.me/post/ja/consider-hover-effect-for-table/
https://texst.net/ie11-css-hack-ms-high-contrast-now-useful/