【JQuery】スマホでhoverを使う

この記事について

つまずきポイント要約

• cssにhoverを書くとスマホで挙動がおかしくなるのでJS側で制御する
• PC用とスマホ用の記述順を入れ替えると android で挙動がおかしくなる
• iPhoneは戻るボタンで戻るとリンク色が変わったままになる問題が残っている

hover を使ったリンクをつくって iPhone で見ると、リンクにタッチした瞬間には hover は反応せずに指を画面から離した瞬間に反応する。

PC上の hover がマウスポインタを置いた瞬間に反応するように、タッチした瞬間にスマホ画面を反応させるには JQuery を使うといい。

Jquery ファイル

//PC用 hover 処理。css に hover を記述するとスマホサイトで見たときに
//挙動がおかしくなるので PC 上の挙動もここでつくる
//PC用とスマホ用を上下入れ替えると、android で挙動がおかしくなる。
//android が hover とtouchstart（touchend）のどちらにも反応するためだと思われる。
$('.touch-res').removeClass("touchstyle").addClass("notouchstyle");
$('.touch-res').hover(
	function () {//---マウスオーバーの処理
        $(this).removeClass("notouchstyle").addClass("touchstyle");
	},//---カンマを忘れずに
	function () {//---マウスアウトの処理
        $(this).removeClass("touchstyle").addClass("notouchstyle");	
}
);

//スマホ用。touchstart & touchend で処理。
$('.touch-res').bind({
    'touchstart': function(e) {
        $(this).removeClass("notouchstyle").addClass("touchstyle");
    },
    'touchend': function(e) {
        $(this).removeClass("touchstyle").addClass("notouchstyle");
    }
});

//CSSファイル

/* JQuery専用なので、htmlファイルには touch-res クラスだけリンクに設定する*/
.touchstyle { background-color:#d9effc;}
.notouchstyle { background-color:transparent;}

問題点がひとつあって、iPhone で次のページに進んだ後、戻るボタンでもどると、リンクの色が変わったままになっている。

iPhone だけなら css の擬似クラス :active で、PC上の hover と同じような反応を出すことができる。ただし、android は反応しなくなる。