スマホでもhoverを対応させる方法
ここ数年の間にスマートフォンの普及は目覚ましく、今やWEBサイトの閲覧の80％以上はスマホからのアクセスだそうです。
サイト制作もモバイルファーストな構造になり、モバイル専用サイトを作るのではなく、
「レスポンシブWebデザイン」がメジャーです。
「レスポンシブ対応」とはPC、スマホとも同じページ（同じHTMLファイル）にアクセスしても、
デバイス（ディスプレーサイズ）ごとに異なるCSS（WEBコンテンツスタイル）を適用させて、色々なデバイス（画面幅）に合ったレイアウトで表示します。
そんな時、パソコン画面でよく使用するCSSスタイルでhover(→マウスオーバー。マウスがあるコンテンツでボタンでメニューなど
に乗ったときに、ふわっと色が変わったり、子メニューが出てきたりする）を使っている箇所が、
スマホ画面ではマウスがないのでhoverが効かず、タップしても変化が起きない！という問題があります。
そのため、スマホ用に別のメニューを用意したり、色変化は諦めたり、、だったりしてませんか？hover要素のスマホ対応方法としてこんな方法があります。
ontouchstart属性を追加する
ontouchstart属性なるものがあるのをご存知でしょうか？
:hover擬似クラスを適用させたい要素にontouchstart属性を追加するだけで、指がhover要素に触れるとイベントが発生します。
PCのイベントでいうと、
マウスポタンがクリックされた際に発生するイベントのonmousedown属性、
キーが押下された際に発生するイベントのonkeydown属性
と同じイベントのようです。
ontouchstart属性は、iOSやandroid OS上で動作するスマホやタブレット端末で実装されているそうです。
また、色々な箇所にhoverクラスがある場合は全体を囲ったブロック要素に記述しておけば、対応領域はそのブロック全てになります。
なお、ontouchstart属性の要素は空指定でいいみたいです。
例：
<div class=”contents” ontouchstart=””>
sampleページを作成しましたので、PCとスマホでアクセスして確認してみてください。
※補足※
最近のandroidではhover対応しているようで、ontouchstart属性指定なしでもhover状態を検知出来るようです。
しかしiPhoneでは実装されていないようですので、iPhone対策の為にもontouchstart属性を付けておくとよいでしょう。