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

URL: https://webrandum.net/sp-hover-active/
公開日: 2019-10-27
更新日: 2020-11-20
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

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


疑似クラスの`:hover`を使うと、ホバー時のスタイルが適応できて、`:active`を使うとクリック時のスタイルの適応ができます。

それぞれの疑似クラスの区別を整理すると、下記のようになります。





- `:hover` = 要素にマウスカーソルが乗っているときのスタイル

- `:active` = 要素をクリックしたときのスタイル


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





- `:hover` = タップ後、違う要素がタップされるまでのスタイル

- `:active` = タップ中のみのスタイル


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


See the Pen [:hover and :active](https://codepen.io/31mskz10/pen/GRRqOzb) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).






## リンク以外のタップ


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


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



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



## まとめ


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


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