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

2021-02-14

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

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

ontouchstart属性を追加する場合

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

ontouchstart=""
(例)
<p class="sp-hover" ontouchstart=""></p>

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

 

JQueryを追加する場合

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

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

 

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

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

広告スポンサーリンク