javascript CSSから「:hover」で指定されているスタイルを無効にする

求めている内容と経緯

スマホ端末でリンクやボタンをタッチした後に「:hover」のスタイルが残ってしまう。
・PCだとマウスが乗ると「:hover」のスタイルが適用。外れると「:hover」のスタイルが適用解除。クリック時も同様にマウスが乗る or 乗らないで判別してくれる。
・スマホだとマウスの乗る・乗らないは関係なく、タッチしたあとも「:hover」のスタイルが適用されたままになる。

対策

よくある対策は「a:hover」などは使わずに「.hover」を設定してjqueryなどでCSSの追加・削除する。
→CSSはいじりたくないし、色々なトコで設定するのが面倒。

タッチイベントが存在するときは「:hover」を無効化する

修正箇所は出来る限り少なくしたい。かつ、複雑にしたくない。
→「ontouchstart」が使える場合のみ「:hover」を無効にする

▼サンプル

if ('ontouchstart' in document.documentElement) {
  for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
    var sheet = document.styleSheets[sheetI];
    if (sheet.cssRules) {
      for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
        var rule = sheet.cssRules[ruleI];
        
        if (rule.selectorText) {
          rule.selectorText = rule.selectorText.replace(':hover', ':active');
        }
      }
    }
  }
}

メモ

「document.styleSheets」を絡めて調べると他にも色々と見つかる。

▼読み込んだCSSをすべて無効にする

$.each($.makeArray(document.styleSheets), function(){
  this.disabled=true;
});
$('*').removeAttr('style');