【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) {} }
関連記事
おすすめ
かんれん
- web / 2020.3.19
- 【CSS】スマホ、タブレットで横スクロールする実装サンプル集
- web / 2020.10.27
- 【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
- web / 2019.4.15
- 【CSS】かわいいタグをつくる
- web / 2018.9.14
- 【CSS】Flexbox 上下中央揃え
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2022.06.27New
- ひかりとあそぶ服。STAMP AND DIARY 2022SS – ほぼ日刊イトイ新聞
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.27New
- ひかりとあそぶ服。STAMP AND DIARY 2022SS – ほぼ日刊イトイ新聞
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす