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

その他

2021-02-14

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

ontouchstart属性を追加する場合

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

(例)
<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:要素からクラスを削除

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

-その他

関連記事

WEBアイコンや記号・マークをカンタンに表示させたい!Font Awesome

読みやすさのためにアイコンを使いたいな、でも作るのに時間がかかるし…。そんな時に、商用OKのフリーアイコンはとっても便利です!

どのリンクから訪問された?パラメータで流入元を把握しよう!

自分のサイトへアクセスしてくれた、その流入元がどこなのか知りたい! リスティング広告? FaceBook? 自然検索? その他、考えられる経路はたくさんあります。 メルマガ、LINE、アプリ、QRコー …

画像を一括変換させたい

photoshopの自動処理「バッチ」は、複数の画像を自動で一括処理できる便利な機能です。例えば画像100枚をRGBからCMYKへ変換するだけでも、1枚ずつ行えば結構時間がかかりますね。それを、バッチ処理ならアクションを登録するだけ。後は自動で仕上げてくれます。