スマートフォン(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.touchHover{background:#ffff00;}
サンプルはこちら
スマホのroll over - jsdo.it - Share JavaScript, HTML5 and CSS
