スマホでhoverが効かない！タップでも対応させたい！

2021-02-14

PR　当ページのリンクには広告が含まれています。

スマホでもhoverでつけた動きを反映させたい

ontouchstart属性を追加します。要素は特に入れなくてOKです。疑似クラス「:hover」を設定した部分がスマホで反応してくれるようになります。

ontouchstart=""
（例）
<p class="sp-hover" ontouchstart=""></p>

<div id="contentInner" ontouchstart=""></div>

bodyの閉じタグの前などに入れます。
タップしたときにcssで.hoverに設定したスタイルになります。

$('a')
  .bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

touchstart：タップで始まるイベント
touchend：指が離れた時のイベント
addClass()：要素にクラスを追加
removeClass：要素からクラスを削除

参考にさせていただきました。ありがとうございました！

参考、引用元