スマートフォン(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
スマートフォン(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
jQuery 最新を取得したい。
こんな記述で取得できるようです。
<script src="http://code.jquery.com/jquery-latest.js"></script>