メディア特性を使用したhoverの設定

はじめに

日常的にhover設定を使っていると思います。リンクにマウスを重ねた時の変化の設定です。

a:hover {
    ...
}

デスクトップやノートPCでは問題無いのですが、スマホなどのタッチデバイスでは問題が起こることがあります。それは、タップ後にhoverの効果が残ってしまうことです。aタグ（ハイパーリンク）で他のページへ遷移する場合は良いのですが、ページ遷移をせずhoverの効果を使用したい場合、このままでは困ります。

どうする？

まずは、スマホなどのタッチデバイスとそれ以外を分けます。
たまに画面幅で判定しているのを見かけるのですが、それでは完全とは言えません。
今回は、media特性のhoverで判定する方法を使用します。

@media (hover: hover) {
    a:hover {
        ...
    }
}

https://developer.mozilla.org/ja/docs/Web/CSS/@media/hover

これで判定は問題ない！と思うかもしれませんが、そうはいきません。
というのも、まだIE11が生き残ってるからです。IE11ではこのコードは対応してません…
https://caniuse.com/mdn-css_at-rules_media_hover

（不本意だとしても）IE11対応が必要な場合、ユーザーエージェントで判定してIE11用の対応を書きましょう。判定には、こちらの記事が参考になりました。
たとえば、bodyにクラス付与し、スタイルを設定すると良いと思います。

body.-ie11 {
    a:hover {
        ...
    }
}

で、スマホは？

スマホではタップ時に変化なし！ということなら、ここまでの設定で問題無いのですが、
タップ中にスタイルを変化をさせたい場合はどうすれば良いでしょうか。

まず、先ほどのメディア特性で「hoverが使えない場合」（none）を指定します。

@media (hover: none) {
    ...
}

合わせて使用するのが、:activeとそれを有効にするためのontouchstartです。
ontouchstartで囲んだエリアでは、タップ中だけ:activeが有効になります。

<div ontouchstart="">
    <a href="#">LINK</a>
</div>

@media (hover: none) {
    a:active {
        ...
    }
}

これで、タップした時にだけ、スタイルを設定できます。

さいごに

JavaScriptでクリック（タップ）時にだけクラスを付与するというのも１つの方法だと思うのですが、
今回、（IE11非対応なら）JavaScriptを使用しない方法を紹介しました。参考まで。