Hatena::ブログ(Diary)

dentaq log

 

2011-11-24

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

09:13

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

リンク元