【CSS】スマホでのhoverの動作

そういえば、スマホでのhoverってどうなっているんだろうと。

.main{
  border: dotted red 3px;
  height: 100px;
  width: 100px;
}
.main:hover{
  background-color: coral;
}

これを↓にUPしました。
http://sorane.html.xdomain.jp/demo/001.html
こちらからもどうぞ。

DEMOのQRコード

結果として私のスマホでの結果ですが、
①タップすると有効に
②設定した要素外をタップすると無効に
といった感じでした。

結論としては使えるけど、全画面表示はダメってところでしょうか。
もともとPCでもhoverで全画面表示なんてほぼ使いませんが。
カーソルの逃げ場がなくなりますし。

あとはリンクなどのタップすると別の動作がある場合も注意ですね。
注意というより意味がなくなるだけですが。

昔は動作させるためにontouchstart属性だったりを付けないといけなかったようですが、今は多少気を付ければそのまま使えそうで安心しました。

PCで作業するのでスマホの存在を忘れがちなんですよね……