【CSS】タブレット、スマホ表示の時は:hoverを不要にする

2018.10.5
CSS

あ、:hoverが残ってる。
そんなときの記述。
問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。

CSS サンプル

iPad Pro横向きサイズの「1367px」以上を指定。
PCの画面を縮めたときが問題ではあるが困ったときには使いやすい。
JSで作るのもありだが少々手間だなと思うときに是非。

@media screen and (min-width: 1367px) {
  a:hover {
    opacity: 0.7;
  }
}

JavaScrip サンプル

JSだったら。ただしこれだとタッチデバイス（スマホやタブレット）では全てのhoverが解除されてしまう。

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

if (touch) { // remove all :hover stylesheets
    try { // prevent exception on browsers not supporting DOM styleSheets properly
        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) {}
}