WebDesigner's Memorandumウェブデザイナーの備忘録

疑似要素の:hoverと:activeのスマホでの挙動の違い

疑似要素の: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のスタイルを変えるというのは面倒ですしあまり意味がなさそう)。

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね