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

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

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

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

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

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

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

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

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

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

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

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

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

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

$( 'a' ).bind('touchstart', function(){

$(this).addClass( 'hover' );

}).bind('touchend', function(){

$(this).removeClass( 'hover' );

});

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

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

var touch = 'ontouchstart' in document.documentElement

|| navigator.maxTouchPoints > 0

|| navigator.msMaxTouchPoints > 0;

if (touch) { // remove all :hover stylesheets

try { // prevent exception on browsers not supporting DOM styleSheets properly

for (var si in document.styleSheets) {

var styleSheet = document.styleSheets[si];

if (!styleSheet.rules) continue;

for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {

if (!styleSheet.rules[ri].selectorText) continue;

if (styleSheet.rules[ri].selectorText.match(':hover')) {

styleSheet.deleteRule(ri);

}

} catch (ex) {}

}

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

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

＜Codecampの特徴＞

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

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

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

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