スマホサイト

スマホでhoverを有効にする方法

投稿日:

PC用のサイト制作ではお馴染みの「hover」エフェクトだけど、スマホサイトの場合はこれが効かない。
スマホサイトでも「hover」エフェクトを有効にする方法を調べてみました。できるだけ簡単に対応できるようにしたいというのもポイントにしました。

CSSでhoverを指定したものは、PCではhoverしているとき、スマホではタップして指が離れるときにhoverが有効になるらしい。

一番簡単な方法

ontouchstart=""

を加えるだけ!
bodyにontouchstart=""を指定すれば、子要素がタッチ時に反応するようになる。属性のプロパティは空でOKです。
ontouchstart=""である必要はない ontouchendでも可能。

 

スマホでhoverエフェクト

ただ、iphoneでテストしてみると、PCのhoverのようには動かず、ボタンとしての認知性は向上しないように感じた。
もう少し頑張ってリサーチ。

いろいろ調べてみると、JQueryを使うというのが圧倒的に多かった。

でもプログラムには疎いので、JQueryやJavaScriptは敷居が高い。。。(汗)
けれど、ここで止まっていては前に進まないので、意を決して、いくつか公開されているコードをひとつずつコピペし、地道に検証してみることにした。その結果、ちゃんと作動したのが下のコード。

JQueryを使う

 

解説

JavaScriptで扱えるイベントに「タッチイベント」というものがあり、タッチデバイスでユーザーがスクリーンに触れた時の動作を取得することができます。
「タッチイベント」の中では、下の3種類がよく使われています。
 ◎touchstart = タッチが開始した瞬間に発生
 ◎touchmove = タッチの後、指を画面上で動かす度に発生
 ◎touchend = タッチの後、指を画面から離した瞬間に発生
 
このイベントを使ってタッチデバイス用のホバースタイルを設定すればよいのですが、PCからの閲覧時にはタッチイベントが使えず、従来の:hoverでスタイルを設定しなければならないという問題があります。
 
それを解決するためにこのコードでは、タッチデバイスではtouchstart、それ以外ではhoverというふうに条件を分岐できるように、if文でユーザエージェントでの振り分けを行っています。
 後は、タッチデバイスならタッチが開始した時にhoverスタイル用のクラスを追加し、タッチが終わった時にクラスを削除。
PCの方も同様で、jQueryのhoverイベントを使ってCSSの:hoverと同じ挙動になるようクラスを追加・削除しています。
 
この方法ならクラスで一元的に管理できるのでメンテナンス性も高いです。
実際にiphoneでテストしてみましたが、バッチリ!でした。 
 

出典:http://www.beclue.net/front-end/touch-hover

その他

リサーチ中にみつけた説明がわかりやすかったサイト

【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法





-スマホサイト

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

スマホサイトのメニューづくり

  スマホサイトの制作にあたり、最近はどんなメニューが主流なのか調べることにした。 以前は3本線のハンバーガーメニューで下に伸びるアコーディオン式が多かったように思ったけど、最近はスルッと横 …