【JQuery】スマホでhoverを使う

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 は反応しなくなる。