なんにもない日の頭の中はこんなもんだったりする

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

  • 2018.10.5
【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) {}
}

関連記事

【jQuery】スマホ、タブレットでhoverを有効にする

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日