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

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

あ、: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) {}
}

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

10

/

15

2024

Googleさんの
おすすめ

10

/

15

2024

デザインの記事

餃子そして焼味 巣王
ルックバック
【jQuery】スライダープラグイン「slick」実装サンプル集