スマートフォンなどのタッチデバイスの場合、hover を設定した要素では要素をタッチ（タップ）しても
- 何も起きない
- 起きたとしても適用されたスタイルが解除できない
- 違う要素がタッチされるまでスタイルが適用されたまま
こんな感じに不安定…というか使えないという認識で良いと思います。
その場合は要素や親要素に値が空の ontouchstart 属性を指定します。
<div class="box" ontouchstart=""> 〜〜 </div>もし外部のサービスなどを利用していて、HTMLに属性が付けられないなどの事情がある場合、JavaScriptを利用して付与してしまうことも可能です
//ontouchstart 属性を body に付与
document.getElementsByTagName('body')[0].setAttribute('ontouchstart', '');JavaScriptで付けられる、となんとなく認識できていると、強引な方法でもなんとかできたりしますので、ちょっと心に余裕ができますね（笑）