jQuery不要!hoverに設定したCSSがスマホで反応しない時の対処法

スマホで:hoverが効かなくて困る






:hoverに設定したCSSがスマートフォンで反応しない!なんて事ありませんか?

実は、普通にCSSの:hover:activeにスタイルを設定してもスマホでは適用されないんですね。
とは言え、PCよりもスマホでのアクセスが多いモバイルファーストの時代なので、スマホでも hoverエフェクトを実装したいところ。

今回は、そんな悩みをiQueryを使わず簡単に解決できる方法を紹介します!

結論! ontouchstart属性を追加するだけ

結論から言うと、スマホで :hover擬似クラスを適用させたい要素に ontouchstart属性を追加するだけで、スマホでも hoverエフェクトが実装できます。

ontouchstart属性のプロパティは空でOKです。

ontouchstart属性を追加するだけとは言え、hoverエフェクトを適用させたい要素が複数あった場合は、それぞれの要素に ontouchstart属性を追加するもかなりの手間ですよね。

そんな時はbodyタグにontouchstart属性を追加しておけば、ページ内の全ての要素に対して適用させる事ができます。個別の要素に属性を追加する必要がないので、ボタンを追加する場合でも安心です。

以下は要素にontouchstart属性を追加したサンプルです。PCではいまいちわかりにくいと思いますが、スマホでもhoverエフェクトが適用されています。

スマホでもhoverエフェクト



まとめ

冒頭にも書いていますが、PCよりもスマホでの閲覧が増えているので、以前に増してスマホでのユーザビリティを考慮したサイト作りが大切になっています。

スマホの画面をタッチして何も反応がないと、ユーザーも不安になると思うので、やっぱりスマホでもhoverエフェクトが必要だと思います。

今回紹介した方法は、jQueryを使わずに簡単に実装できるので、初心者の方も是非一度試してみてください!

「jQuery不要!hoverに設定したCSSがスマホで反応しない時の対処法」でした。

コピペで簡単!背景色や文字色をマウスオーバーでふわっと切り変える方法

2017.10.09

複雑なマウスオーバーエフェクトが3分で実装可能な「Hover.css」が便利

2018.06.21






スマホで:hoverが効かなくて困る