スマートフォン(iPhone/Android)でhover (rollover) を実装したい

touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」
といった実装を行いたい場合。



cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。

$(function(){
	var start = "touchstart";
	var end   = "touchend";
$(".touchHover").bind(start,function(){
	$(this).addClass("touchstart");
	});
$(".touchHover").bind(end,function(){
	$(this).removeClass("touchstart");
	});
});

<a href="#" class="touchHover">ボタン</a>

a{background:#ccc;}
a.tohchstart{background:#ffff00;}

サンプルはこちら
スマホのroll over - jsdo.it - Share JavaScript, HTML5 and CSS