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