タッチデバイスでもhoverの見た目を再現する

タッチデバイスではhoverの見た目はあまり実装しない風潮ですが、要望があったので対応しました

デモ

https://codepen.io/fujimio/pen/PxLdLB

HTML

対象にontouchstart=""という属性を追加
ontouchstartとは「指先が触れた際に発生する」イベントです

<a href="#" ontouchstart="">ボタン</a>

CSS

いつも通り書くだけ！

a:hover{
  background: red;
}

タッチデバイスでの挙動

• hover
  タップして、他の要素をタップするまで、デザインが反映され続ける

• active
  タップされた瞬間、一瞬だけ、デザインが反映される

PC版でいうhoverはactiveの方がイメージに近いのかな…と思います