タッチモニタもトラックパッドも有るデバイスにおける:hoverの件をDOM属性で解決する� - Qiita

前置き iPadProやMicrosoftSurfaceではタッチモニタでのクリックも、外部ポインタデバイスでのマウスオーバーも両方あるので、単一のコンポーネントに対して「どっちから使われてもいい感じに見えるように」とか言われたりします。 今回はjs側でクラス制御するのでなく、DOM属性を付与するアプローチで、オールドスクールなCSS書きの人と分業できるアプローチを紹介します 要点 適当な名前の data-* 属性を対象のコンポーネントのDOMに付与する（例えば data-touch) ontouchstart で data-touch を常にDOMに付ける onmouseleave で data-touch を常にDOMから剥がす :not([data-touch]):hover に対して、これまで通りの素朴なCSSを書く :not([data-touch]):active, [data