「やらなくてもいいけどやってたら気持ちが良いことNo.1（当社調べ）」
iPhone Androidでは効かなかったりあまり見えなかったりする（そしてむしろバグる）:hover（マウスオーバー時のスタイル）対応についてそろそろデフォで入れたげようかなと思って調べました。
結果結局は皆さんやってるやり方がいちばんやねって。なった。

予算のない案件やiPhoneだけならお手軽に〜〜

タッチデバイスでCSSの:activeや:hoverを機能させる。 – Qiita
https://qiita.com/junya/items/3ff380878f26ca447f85

ontouchstart=""

を加えるだけ。。。OTEGARU！！！
でも個人的には:hoverより：activeのほうが挙動がスキなのでUA判定してだしわけかな。

ただbodyに突っ込んどいたらえんじゃね？とおもってモックでbodyにいれたところファーストビューでしかhover効果が出なくてバグかと思って焦った＆悩んだ。個別にaタグのラッパーにつけたら動いた。
どうやらbodyのheightが100%だったから有効領域がノビてなかったみたい。
なので使うなら#contentsとか#wrapperとか大枠のパーツに使うのオススメ。

これでいいじゃんと思ったらandroidでの反応が良くない。スクロール中は反応しないし、タッチしたよ〜〜って解るくらい1秒押すとコンテクストメニュー出てきてうぜぇ。嫌。

Androidもたいおうさせるんなら結局は皆さんやってるやり方がいちばんやねって。

スマホで触れている間だけhoverする – Qiita
https://qiita.com/RinoTsuka/items/8992cc127d42af13cc4f

androidも考えたらやっぱcssにSP用のクラスと記述追記＋JSでクラスの制御が一番やなって。
1)jsでtouchstartとtouchendでクラスをつけとりする。

$('.jsTouchEffect')
  .on('touchstart', function(){
    $(this).addClass('hover');
}).on('touchend', function(){
    $(this).removeClass('hover');
});

2)UA判定、PCとSPでbodyかhtmlにクラスを付与

3)CSSをUAで出し分け

.isPC & {
    &:hover{
        opacity: 0.7;
    }
}
.isSP & {
    &.hover{
        opacity: 0.7;
    }
}

結局#contentsにontouchstart=””をつけて、個別で対応したいところは出し分け記述、かなぁ

まとまった。これで様子見。