疑似クラスの:hoverと:activeのスマホでの挙動の違い

:hoverと:activeでの挙動の違い

疑似クラスの:hoverを使うと、ホバー時のスタイルが適応できて、:activeを使うとクリック時のスタイルの適応ができます。
それぞれの疑似クラスの区別を整理すると、下記のようになります。

• :hover = 要素にマウスカーソルが乗っているときのスタイル
• :active = 要素をクリックしたときのスタイル

しかし、スマホの場合はマウスカーソルがないため、下記のような挙動の違いが出てきます。

• :hover = タップ後、違う要素がタップされるまでのスタイル
• :active = タップ中のみのスタイル

そのため、スマホで何かをタップするときはホバーとアクティブが順に適応され、ホバーのスタイルに関しては他の要素がタップされるまでスタイルが残り続けます。

See the Pen :hover and :active by Masakazu Saito (@31mskz10) on CodePen.

リンク以外のタップ

また、<a>などのリンク要素なら問題ありませんが、<div>などの本来はクリックしないような要素に:hover、:activeを付けている場合はうまく反応しないことがあります。

そんなときは、要素に ontouchstart="" を付ければ解決できます。

<div class="box" ontouchstart=""></div>

まとめ

:hoverと:activeの挙動に関しては、知識として知っておくレベルで問題なさそうです（わざわざメディアクエリで横幅が小さいときは:hoverと:activeのスタイルを変えるというのは面倒ですしあまり意味がなさそう）。

個人的にはスマホはマウスカーソルが無い分、「前にどこをクリックしたのか」が分かった方が使いやすい気もします。