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

その他

2021-02-14

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

ontouchstart属性を追加する場合

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

JQueryを追加する場合

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

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

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

-その他

関連記事

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

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

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

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

画像を一括変換させたい

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

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。