スマホでhoverアニメーション実装時にhoverを効かせる方法

PC時にhoverアニメーションを実施することは常になっています。
しかしながらそれらをレスポンシブ化するときにhoverアニメーションを放置してしまっていることが多々あるのではないでしょうか。

※ここでいうhoverアニメーションはふわっと色が変わったり、線がスムーズに出てきたり、サブメニューなどがするするっと表示されることを言います。

タブレット、スマホになるとそれらのhoverアニメーションが2回タップしないと変化しないという現象が発生します。

そのためタブレットとスマホのときにはそれ専用のCSSを充てておく必要があります。

今回はこれらの対応策をご紹介しようと思います。

ontouchstart属性を使用する

hover疑似クラスを適用させたい要素にontouchstart属性を追加すると
タップしたときにイベントが発生するようになります。


<div class="viewBtn" ontouchstart="">
 <a href=""></a>
</div>

hover疑似クラスを充てているブロックにはデフォルトでontouchstart属性を
いれておけば今後はそのような心配は必要なくなります。

みなさんもぜひ試してみてください。