[css]PC限定で幅別の:hoverを仕込む方法

既知の応用でやれる。

こんな感じ

@media (pointer: fine) {
//マウスカーソルを合わせた場合
}
@media (pointer: fine) and (max-width: 1023.98px){
//1023.98px以下でマウスカーソルを合わせた場合
}
@media (pointer: fine) and (max-width: 767.98px){
//767.98px以下でマウスカーソルを合わせた場合
}

どういうあれか

レスポンシブで組んだ場合、:hoverが地味に邪魔くさかったりする。

PCだとカーソルを合わせたら反応するギミックが、スマホとかタブレットとかだとタップならともかくスワイプしたときにも動作して、動作しっぱなしで戻らない（:hoverのまま）とかになる。装飾によってはとんでもなく見づらいんで、「マウスカーソルを乗せたとき」って条件が欲しくなる。それがpointer: fine。

更に、PC環境でもレスポンシブでデザインが変わる場合、:hover処理を変えたいときもある。そうすると幅の指定と組み合わせたい。andで幅を追加したら実現する。

そういうアレ。