フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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

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

デモ

codepen.io/fujimio/pen/PxLdLB

HTML

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

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

CSS

いつも通り書くだけ!

a:hover{
  background: red;
}

タッチデバイスでの挙動

ezgif.com-video-to-gif (1).gif

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

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

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

[紹介元] CSSタグが付けられた新着記事 – Qiita タッチデバイスでもhoverの見た目を再現する

コメント

記事に戻る

コメントを残す