スマホとタブレットでhoverの動きを無効化する

JavaScriptに以下のコードを記述しましょう。

var touch = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

if(touch) {
  try {
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

関連記事:

【JS】フェードインのアニメーションで要素を表示させる方法 JavaScriptを使った文字数カウンターアプリの作り方 「getElementsByName」のメソッドについて【JS】 プログラミングでよく使う変数とは？【JavaScript】