タッチデバイスでCSSの:activeや:hoverを機能させる。

demo
https://jsfiddle.net/junya_5102/pgu54owz/6/

タッチさせる要素に ontouchstart=""と指定する。
これを指定しないとタッチでは:activeと:hoverは反応しない。

<div class="box" ontouchstart=""></div>

あとはCSSで:active,:hoverを書く。

:active タッチ中のみ処理を行う

.box:active{
  background-color: red;
}

:hover タッチ後、違う要素がタッチされるまで

.box:hover{
  background-color: red;
}

補足

bodyにontouchstart=""を指定すれば、子要素がタッチ時に反応するようになる。
※ ontouchstart=""である必要はない ontouchendでも可能。

demo
https://jsfiddle.net/junya_5102/pgu54owz/7/

環境

iOS 9 で Safari と Chrome で確認