PC用のサイト制作ではお馴染みの「hover」エフェクトだけど、スマホサイトの場合はこれが効かない。
スマホサイトでも「hover」エフェクトを有効にする方法を調べてみました。できるだけ簡単に対応できるようにしたいというのもポイントにしました。
CSSでhoverを指定したものは、PCではhoverしているとき、スマホではタップして指が離れるときにhoverが有効になるらしい。
このページのもくじ
一番簡単な方法
ontouchstart=""
を加えるだけ!
bodyにontouchstart=""
を指定すれば、子要素がタッチ時に反応するようになる。属性のプロパティは空でOKです。
※ ontouchstart=""
である必要はない ontouchendでも可能。
<div class=“box” ontouchstart=“”>これは設定例です</div>
ただ、iphoneでテストしてみると、PCのhoverのようには動かず、ボタンとしての認知性は向上しないように感じた。
もう少し頑張ってリサーチ。
いろいろ調べてみると、JQueryを使うというのが圧倒的に多かった。
でもプログラムには疎いので、JQueryやJavaScriptは敷居が高い。。。(汗)
けれど、ここで止まっていては前に進まないので、意を決して、いくつか公開されているコードをひとつずつコピペし、地道に検証してみることにした。その結果、ちゃんと作動したのが下のコード。
JQueryを使う
$(function () { // hover var userAgent = navigator.userAgent; var item = $("a").add("button"); if (userAgent.indexOf("iPhone") >= 0 || userAgent.indexOf("iPad") >= 0 || userAgent.indexOf("Android") >= 0) { item.on("touchstart", function () { $(this).addClass("hover"); }); item.on("touchend", function () { $(this).removeClass("hover"); }); } else { item.hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); } });
解説
出典:http://www.beclue.net/front-end/touch-hover
その他
リサーチ中にみつけた説明がわかりやすかったサイト