iPhone/Androidなどwebkitのa:hoverをタッチすると元の状態に戻らない、hoverを無効にする方法

プログラミング

マウスがあるボタンの上にくる時に発生するイベントを、ホバー、マウスオーバー、ロールオーバーと言うそうです。

それぞれ少しずつ意味は違うそうですが、ここではその違いは、置いておきます。

ところで、Webのアプリケーションで、

あるボタンの上にマウスが来たら、色を変更する

あるボタンを押したら、更に別の色に変更する

という動きを考えた場合、

CSSの hover、active を使えば簡単に実現できます。

ところが、スマートフォンやタブレットなどのタッチ系デバイスでは、一度タッチして離しても色が hover の時のままで、元に戻りません。

どうもこれはよくある不具合?のようなので、何とか解決方法を探してみました。

スポンサーリンク
スポンサーリンク

スマホで擬似的にhoverを実装する

よくある解決策の一つが、JavaScriptで疑似的にhoverを実装する方法です。

class名をあてて擬似的にhoverを実装するのです。

これが一つのサンプルです。

ただ、よく考えてみると、タッチデバイスでは、そもそも hover が不要なので、スマホでhoverを無効にする方法を考えてみました。

スマホでCSSの hover を無効にする

スマホでCSSの hover を無効にするには、以下のJavaScriptを利用します。

このコードは、CSSの中で、:hover を使っている、すべてのルールを削除することが出来るので、極めて有効です。

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp