ここ数年の間にスマートフォンの普及は目覚ましく、今や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とスマホでアクセスして確認してみてください。

ontouchstartサンプルページ