スマートフォンだと:hover擬似クラスを使ったマウスオーバーエフェクトが反応しない！なんて事ありませんか？
実は、普通にCSSの:hoverと:activeにスタイルを設定してもスマホでは適用されないんですね。
とは言え、PCよりもスマホでのアクセスが多いモバイルファーストの時代なので、スマホでもマウスオーバーエフェクトを実装したいですよね。
結論！ ontouchstart属性を追加するだけ
結論から言うと、:hover擬似クラスを適用させたい要素に ontouchstart属性を追加するだけで、スマホでもマウスオーバーエフェクトが実装できます。
ontouchstart属性のプロパティは空でOKです。
1 | <div class="btn" ontouchstart="" >READ MORE</div> |
ちなみに、bodyタグにontouchstart属性を追加しておけば、ページ内の全ての要素に対してマウスオーバーエフェクトが適用できます。
個別の要素に属性を追加する必要がないので、要素を後から追加する場合でも安心です。
1 | <body ontouchstart="" ></body> |
以下は要素にontouchstart属性を追加したサンプルです。PCではいまいちわかりにくいと思いますが、スマホでもhoverエフェクトが適用されています。
スマホでもhoverエフェクト
まとめ
冒頭にも書いていますが、PCよりもスマホでの閲覧が増えているので、以前に増してスマホでのユーザビリティを考慮したサイト作りが大切になっています。
スマホの画面をタッチして何も反応がないと、ユーザーも不安になると思うので、やっぱりスマホでもhoverエフェクトは必要だと思います。
「スマホでマウスオーバーエフェクトが反応しない時の対処法」でした。
