マウスがあるボタンの上にくる時に発生するイベントを、ホバー、マウスオーバー、ロールオーバーと言うそうです。
それぞれ少しずつ意味は違うそうですが、ここではその違いは、置いておきます。
ところで、Webのアプリケーションで、
あるボタンの上にマウスが来たら、色を変更する
あるボタンを押したら、更に別の色に変更する
という動きを考えた場合、
CSSの hover、active を使えば簡単に実現できます。
ところが、スマートフォンやタブレットなどのタッチ系デバイスでは、一度タッチして離しても色が hover の時のままで、元に戻りません。
どうもこれはよくある不具合？のようなので、何とか解決方法を探してみました。
スマホで擬似的にhoverを実装する
よくある解決策の一つが、JavaScriptで疑似的にhoverを実装する方法です。
class名をあてて擬似的にhoverを実装するのです。
これが一つのサンプルです。
|
1 2 3 4 5 |
$( 'a' ).bind('touchstart', function(){ $(this).addClass( 'hover' ); }).bind('touchend', function(){ $(this).removeClass( 'hover' ); }); |
ただ、よく考えてみると、タッチデバイスでは、そもそも hover が不要なので、スマホでhoverを無効にする方法を考えてみました。
スマホでCSSの hover を無効にする
スマホでCSSの hover を無効にするには、以下のJavaScriptを利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント