Edited at

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

More than 3 years have passed since last update.

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 で確認