スマホとタブレットで:hoverの挙動を無効化する方法

スマホとタブレットで:hoverの挙動を無効化する方法

スマホとタブレットで:hoverの挙動を無効化する方法

スマホやタブレット等のタッチデバイスでは、リンクやボタンに指定した:hoverのスタイルが邪魔になるケースがあります。というか、タッチデバイスでは:hoverの挙動は不要ですよね。

タッチデバイスでのみ、一括して:hoverのスタイルを無効化する方法が、125naroomさんのブログで書かれていたのでご紹介したいと思います。

JavaScriptを使った方法ですが、このやり方だとコピペするだけで:hoverを一括無効化できて非常に便利です。

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

例えば、以下のようなスタイルを指定していたとします。

a {
  background: #696969;
  color: #fff;
}

a:hover {
  background: #fff;
  color: #696969;
}

:hoverのスタイルをCSSで無効化する場合、以下のように:hoverの内容を打ち消すスタイルを記述する必要があります。

@media screen and (max-width: 768px) {
  a:hover {
    background: #696969;
    color: #fff;
  }
}

これだと少々面倒ですね。

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

ようやく本題ですが、JavaScriptを使って、スマホ・タブレットで:hoverの挙動を無効化させる方法です。

125naroomさんのブログで紹介されていた方法は以下の通りです。このJavaScriptをコピペするだけで、スマホやタブレットでは:hoverのスタイルが効かなくなります。

<script>
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) {}
}
</script>

タッチデバイスを判別して、deleteRuleで:hoverの付いたスタイルを削除しています。

あとがき

コピペするだけでOKですが、もっと細かく条件を指定したい場合は、以下の部分で判定内容を変更しましょう。

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

スマホやタブレットで:hoverのスタイルを無効化したい場合は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です